/* Nuvola v4 - 5. zaro.ai's visual language with blue in place of its purple, in neutral greys (her call: no brown
   tones): light paper and grey bands, near-black type, solid buttons, and drawings made of lines and dots.
   Solid colours only: no gradient anywhere. v4 - 10 (her call): pill buttons, and rounded corners on everything that
   had sharp ones: the header, cards, panels, fields, tiles, the photo and the icons' line ends. */

:root {
  --paper: #fafafa;
  --sand: #ededed;
  --white: #fff;
  --ink: #1e1e1e;
  --ink-2: #4a4a4a;
  --grey: #6b6b6b;
  --label: #696969;
  --rule: #dcdcdc;
  --rule-2: #c4c4c4;
  --outline: #8c8c8c;
  --blue: #295ae0;
  /* blue on the dark sections: brighter, so it reads as blue (the light --sky looked lilac there) and holds 3.5:1 */
  --blue-d: #3e6ff2;
  --sky: #aabff8;
  --dark: #262626;
  --dark-rule: #454545;
  --dark-tile: #363636;
  --on-dark: #fafafa;
  --on-dark-2: #adadad;
  --on-dark-3: #8f8f8f;
  --hover: #333;
  /* the nav's glass, as zaro.ai's: white at 72% over a blur of what passes under it */
  --glass: rgba(255, 255, 255, .72);
  --field: #f2f2f2;
  --error: #c4402f;
  --font: "Host Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Zoom. --z is 1px up to a 1440 × 760 screen; on bigger screens the whole layout grows with it (following the
     width, kept within the height so the pinned scenes still fit), up to 1.75px. site.js mirrors it as Z. */
  --z: clamp(1px, min(0.069444vw, 0.131579vh), 1.75px);
  --zn: min(var(--z), 1.375px);
  --wrap: calc(1240 * var(--z));
  --pad: calc(48 * var(--z));
  --gut: 24px;
  /* the nav stays one size on every screen, as zaro.ai's does (it used to grow with the zoom) */
  --nav-h: 80px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* corners (v4 - 10): pills for buttons; cards and panels, then fields and small cards, then tiles */
  --r-pill: 999px;
  --r-lg: calc(24 * var(--z));
  --r-md: calc(12 * var(--z));
  --r-sm: calc(10 * var(--z));
}

* { box-sizing: border-box; }
/* hidden always hides, whatever display a class gives (the sent form stayed on screen without this) */
[hidden] { display: none !important; }
/* (no scroll anchoring: when the layout changes, site.js puts the reader back in place itself) */
html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); overflow-anchor: none; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 calc(17 * var(--z))/1.6 var(--font); letter-spacing: .005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--sky); color: var(--ink); }
.ic { width: calc(20 * var(--z)); height: calc(20 * var(--z)); flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic.solid { fill: currentColor; stroke: none; }

/* The frame: the content column. Only Contact, the cloud's section, keeps hairline rules at its edges. */
.frame { position: relative; width: min(var(--wrap), calc(100% - 2 * var(--gut))); margin: 0 auto; padding: 0 var(--pad); }
main > section + section, .foot { border-top: 1px solid var(--rule); }
.band { background: var(--sand); }

/* A drawing: the canvas fills its box and fades in once the first frame is drawn */
.viz { position: relative; }
.viz canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s var(--ease); }
.viz.on canvas { opacity: 1; }
/* nearest sampling for the drawings, so a box left on half a device pixel can't blur them (not above 2x, where the
   canvas, kept at 2x, is scaled up) */
@media (max-resolution: 2dppx) { .viz canvas { image-rendering: pixelated; } }

/* Type: two-tone headlines, ink then grey (or blue) */
.h2 { margin: 0; font: 500 clamp(32px, 3.6vw, calc(50 * var(--z)))/1.08 var(--font); letter-spacing: -0.025em; color: var(--ink); text-wrap: balance; }
.h2 .ln { display: block; }
.h2 .dim { color: var(--ink-2); }
.h3 { margin: 0; font: 500 calc(19 * var(--z))/1.3 var(--font); letter-spacing: -0.01em; }
.lead { color: var(--grey); font-size: calc(18 * var(--z)); line-height: 1.6; max-width: calc(560 * var(--z)); text-wrap: pretty; }
.tint { color: var(--blue); }
.nw { white-space: nowrap; }
.label { font: 500 calc(11 * var(--z))/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--label); }

/* Letters that decode in, as on zaro.ai: the real word stays in the page; a copy on top shows the scramble */
.scr { position: relative; }
.scr.run { color: transparent !important; }
.scr.run::after { content: attr(data-s); position: absolute; left: 0; top: 0; color: var(--blue); white-space: nowrap; transform: scale(var(--sx, 1)); transform-origin: 0 62%; }

/* Buttons: one pill style (v4 - 10), solid colours */
.bx { display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--z)); height: calc(48 * var(--z)); padding: 0 calc(24 * var(--z)); border: 1px solid transparent; border-radius: var(--r-pill); background: none; font: 500 calc(16 * var(--z))/1 var(--font); letter-spacing: .005em; white-space: nowrap; cursor: pointer; transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease); }
.bx .ic { width: calc(16 * var(--z)); height: calc(16 * var(--z)); stroke-width: 1.8; transition: transform .2s var(--ease); }
.bx:hover .ic { transform: translateX(2px); }
.bx-primary { background-color: var(--ink); color: var(--paper); }
.bx-primary:hover { background-color: var(--hover); }
.bx-line { border-color: var(--outline); color: var(--ink); }
.bx-line:hover { background-color: rgba(30, 30, 30, .06); border-color: var(--ink); }
.bx-light { background-color: var(--paper); color: var(--ink); }
.bx-light:hover { background-color: var(--sand); }
.bx-sm { height: 36px; padding: 0 14px; font-size: 14px; gap: 8px; }
.bx-sm .ic { width: 14px; height: 14px; }
.bx:focus-visible, .nav-links a:focus-visible, .menu-btn:focus-visible, .layer-hd:focus-visible, .sov-item:focus-visible, .brand:focus-visible, .foot a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.nav-links a, .brand, .foot a, .layer-hd, .sov-item, .ask-again { border-radius: 6px; }
/* on the dark sections the ring is the brighter blue, so it stays visible */
.final .bx:focus-visible, .foot a:focus-visible { outline-color: var(--blue-d); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: calc(12 * var(--z)); }

/* Nav: a bar of frosted glass inside the frame's edges, shown once the page scrolls: white at 72% over a blur of the
   page beneath, with zaro.ai's light inner edge. Over the dark end of the page (Contact and the footer) it slides
   away, and comes back on the way up. The bar fades itself: a fade on its parent would turn the blur off. v4 - 10: the
   bar is a pill, concentric with the pill button in it (10px all round, its 1px edge included); the phone menu opens
   beneath it as its own rounded panel. */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h); pointer-events: none; transition: transform .45s var(--ease), visibility 0s; }
.nav.away { transform: translateY(-100%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
.nav-in { pointer-events: auto; width: min(var(--wrap), calc(100% - 2 * var(--gut))); height: 56px; margin: 12px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: var(--r-pill); background: transparent; transition: background-color .25s, border-color .25s, box-shadow .25s, opacity .3s var(--ease); }
.nav.away .nav-in { opacity: 0; }
.nav.scrolled .nav-in, body.menu-open .nav-in, .mnav { background: var(--glass); border-color: var(--rule); box-shadow: inset 0 1px 4px var(--white), 0 1px 4px rgba(30, 30, 30, .04); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
/* without the blur the glass would only be pale, so browsers that can't blur keep the bar white */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.scrolled .nav-in, body.menu-open .nav-in, .mnav { background: var(--white); }
}
/* the logo at the left, the links centred in the bar, the button at the right */
/* the logo keeps its v4 - 4 size, growing a little with big screens (v4 - 6, her call); the rest of the bar stays at
   zaro.ai's fixed sizes */
.brand { grid-column: 1; justify-self: start; margin-left: calc(10 * var(--zn)); }
.brand img { height: calc(22 * var(--zn)); width: auto; }
/* The section being read is its link's pill, slightly off-white (her call, site.js sets .on; on the About page, About
   itself). A link pointed at turns black with white type, slowly. The links keep their old 28px apart. */
.nav-links { grid-column: 2; display: flex; gap: 4px; }
.nav-links a { padding: 7px 12px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--ink-2); transition: background-color .45s var(--ease), color .45s var(--ease); }
.nav-links a.on, .nav-links a[aria-current="page"] { background-color: var(--sand); color: var(--ink); }
.nav-links a:hover { background-color: var(--ink); color: var(--paper); }
.nav-cta { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; width: 38px; height: 38px; place-items: center; border: 1px solid var(--rule-2); border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; }
.menu-btn .ic { width: 18px; height: 18px; }
.menu-btn .i-x, body.menu-open .menu-btn .i-menu { display: none; }
body.menu-open .menu-btn .i-x { display: block; }
.mnav { position: fixed; top: calc(12px + 56px + 8px); left: 0; right: 0; z-index: 49; display: none; width: min(var(--wrap), calc(100% - 2 * var(--gut))); margin: 0 auto; padding: 6px 20px 14px; border: 1px solid var(--rule); border-radius: 20px; }
body.menu-open .mnav { display: block; animation: menu-in .32s var(--ease) both; }
/* closing, it stays a moment for its way out (site.js: menu-closing) */
body.menu-closing .mnav { display: block; pointer-events: none; animation: menu-out .22s var(--ease) both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes menu-out { to { opacity: 0; transform: translateY(-8px); } }
.mnav a { display: block; padding: 14px 0; font-size: 18px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--rule); }
.mnav a:last-child { border-bottom: 0; }

/* Reveal on scroll (only once JS has loaded) */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .rv.in { opacity: 1; transform: none; }

/* Pinned scroll stories on large screens; ordinary sections everywhere else */
.story { position: relative; }
.pin { position: relative; }
.pin > .frame { padding-top: calc(110 * var(--z)); padding-bottom: calc(110 * var(--z)); }
/* (pinned from 700px tall: below that the copy no longer fits beside the drawings; site.js uses the same query) */
@media (min-width: 961px) and (min-height: 700px) {
  .js .story { height: var(--story-h, 300vh); scroll-margin-top: calc(-1 * (var(--nav-h) + 8px)); }
  .js .pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .js .pin > .frame { height: 100%; padding-top: var(--nav-h); padding-bottom: 0; }
  .js .pin > .inf-in { align-content: center; }
  .js .pin > .sov-in { display: flex; align-items: center; }
}

/* 01 · Hero */
.hero { position: relative; }
.hero-in { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; column-gap: calc(24 * var(--z)); min-height: max(100vh, calc(680 * var(--z))); padding-top: var(--nav-h); }
.hero-copy { padding: calc(40 * var(--z)) 0; }
.hero h1 { margin: 0; max-width: calc(560 * var(--z)); font: 500 clamp(46px, 5.2vw, calc(80 * var(--z)))/1.0 var(--font); letter-spacing: -0.03em; text-wrap: balance; }
.hero h1 .ln { display: block; }
.hero h1 .w { display: inline-block; animation: word-in .9s var(--ease) both; animation-delay: calc(.08s + var(--i) * 70ms); }
@keyframes word-in { from { opacity: 0; transform: translateY(.25em); } }
.hero .sub { max-width: calc(460 * var(--z)); margin-top: calc(26 * var(--z)); font-size: calc(18 * var(--z)); line-height: 1.6; color: var(--grey); }
.hero .ctas { margin-top: calc(36 * var(--z)); }
.hero-copy > :not(h1) { animation: rise .9s var(--ease) both; }
.hero-copy > .sub { animation-delay: .45s; }
.hero-copy > .ctas { animation-delay: .6s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.hero-viz { height: min(calc(100vh - var(--nav-h) - 24 * var(--z)), calc(700 * var(--z))); min-height: 420px; }

/* 02 · Sovereignty: the headline and the three dimensions on the left, one stage on the right */
.sov-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: calc(52 * var(--z)); align-items: center; width: 100%; }
.sov-side { display: flex; flex-direction: column; }
.sov-side .lead { margin-top: calc(22 * var(--z)); }
.sov-side .label, .inf-copy .label { margin-top: calc(32 * var(--z)); }
.sov-list { margin: calc(14 * var(--z)) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-2); }
.sov-list li { border-bottom: 1px solid var(--rule-2); }
.sov-item { display: flex; align-items: center; gap: calc(16 * var(--z)); width: 100%; padding: calc(12 * var(--z)) 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--label); transition: color .4s var(--ease); }
.sov-item .h3 { color: inherit; font-size: clamp(17px, 1.4vw, calc(20 * var(--z))); }
.sov-item .tile { display: grid; place-items: center; width: calc(40 * var(--z)); height: calc(40 * var(--z)); flex: none; border: 1px solid var(--rule-2); border-radius: var(--r-sm); color: var(--label); transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease); }
.sov-item .tile .ic { width: calc(19 * var(--z)); height: calc(19 * var(--z)); }
.sov-item:hover { color: var(--ink-2); }
.sov-item.on { color: var(--ink); }
.sov-item.on .tile { background: var(--sky); border-color: var(--sky); color: var(--ink); }
/* each dimension's detail opens beneath it, in line with its name; once the script runs, one at a time */
.sov-bd { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--ease); }
.sov-bd > div { min-height: 0; overflow: hidden; transition: visibility 0s; }
.sov-bd p { max-width: calc(470 * var(--z)); padding: 0 0 calc(14 * var(--z)) calc(56 * var(--z)); font-size: calc(15 * var(--z)); line-height: 1.55; color: var(--grey); text-wrap: pretty; }
.js .sov-list li:not(.open) .sov-bd { grid-template-rows: 0fr; }
/* every detail takes the tallest detail's height (--bdh, measured by site.js), so the list keeps one height and
   nothing around it moves as rows open and close (set on the words inside, so a row opening still eases open while the
   other closes, and the list never grows for a moment); a closed detail is hidden from screen readers once it has
   folded. The page doesn't scroll to make up for rows changing (overflow-anchor). */
.js .sov-list .sov-bd p { min-height: var(--bdh, 0px); }
.sov-list { overflow-anchor: none; }
.js .sov-list li:not(.open) .sov-bd > div { visibility: hidden; transition: visibility 0s .5s; }
/* the stage: white, with rounded corners (v4 - 10; it had zaro.ai's notched corner) */
.stage { position: relative; height: min(calc(100vh - var(--nav-h) - 80 * var(--z)), calc(620 * var(--z))); min-height: 400px; background: var(--white); border-radius: var(--r-lg); overflow: hidden; }
.sov-viz { position: absolute; inset: 0; }

/* 03 · Technology: the headline and the stack on the left, the plates on the right */
.inf-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: calc(40 * var(--z)); align-items: center; }
.inf-copy .lead { margin-top: calc(22 * var(--z)); }
.layers { max-width: calc(540 * var(--z)); margin: calc(14 * var(--z)) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule-2); }
.layer { border-bottom: 1px solid var(--rule-2); }
.layer-hd { display: block; width: 100%; padding: calc(12 * var(--z)) 0; border: 0; background: none; text-align: left; cursor: pointer; font: 500 clamp(17px, 1.35vw, calc(19 * var(--z)))/1.3 var(--font); letter-spacing: -0.01em; color: var(--ink); transition: color .4s var(--ease); }
.layer-hd .no { color: var(--label); font-variant-numeric: tabular-nums; transition: color .4s var(--ease); }
.layer.on .layer-hd .no { color: var(--blue); }
/* each layer's detail; while the stack is pinned only the layer in focus stays open */
.layer-bd { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s var(--ease); }
.layer-bd > div { min-height: 0; overflow: hidden; transition: visibility 0s; }
.layer-bd p { font-size: calc(15 * var(--z)); line-height: 1.5; text-wrap: pretty; }
.layer .items { color: var(--ink-2); }
.layer .what { margin-top: calc(3 * var(--z)); padding-bottom: calc(14 * var(--z)); color: var(--grey); }
.js .layers.live .layer:not(.on) .layer-bd { grid-template-rows: 0fr; }
.js .layers.live .layer:not(.on) .layer-hd { color: var(--label); }
/* Each row's text takes the tallest one's height (--bdh), so the list keeps one height whichever row is open. It sits
   on the text, inside the row's clipped box, as Sovereignty's does: on the box itself it opened a row at once while
   the last one was still closing, so the list grew for a moment and the heading above moved up and down. */
.js .layers.live .layer-in { min-height: var(--bdh, 0px); }
.js .layers.live .layer:not(.on) .layer-bd > div { visibility: hidden; transition: visibility 0s .5s; }
.inf-viz { height: min(calc(100vh - var(--nav-h) - 30 * var(--z)), calc(700 * var(--z))); min-height: 460px; }
.inf-label { position: absolute; left: 0; top: 0; translate: 0 -50%; padding: calc(4 * var(--z)) calc(7 * var(--z)); font: 500 calc(12 * var(--z))/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--label); white-space: nowrap; opacity: 0; transition: color .2s, background-color .2s; }
.inf-label.on { background: var(--sky); color: var(--dark); }

/* 04 · Solutions: the headline, a white rounded card for each product, and the lead beneath the cards, all on one
   screen: site.js gives the cards' drawings the height the rest leaves (--sol-viz), from 150px to their full height */
.build > .frame { padding-top: calc(120 * var(--z)); padding-bottom: calc(120 * var(--z)); }
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--z)); margin-top: calc(44 * var(--z)); }
/* (clip-path as well as overflow: a live product's frame is a layer of its own, which overflow alone left unclipped at
   the rounded corners, its scrollbar showing past them; her note) */
.product { display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-lg); overflow: hidden; clip-path: inset(0 round var(--r-lg)); }
.product .viz { height: var(--sol-viz, clamp(260px, 24vw, calc(340 * var(--z)))); min-height: 150px; max-height: calc(340 * var(--z)); border-bottom: 1px solid var(--rule); }
.sol-lead { margin-top: calc(28 * var(--z)); }
@media (min-width: 961px) and (min-height: 700px) {
  .build { scroll-margin-top: calc(-1 * (var(--nav-h) + 8px)); }
  .build > .frame { padding-top: calc(var(--nav-h) + 30 * var(--z)); padding-bottom: calc(44 * var(--z)); }
  /* the previews take all the height the rest leaves, whatever the window's shape: capped at their full height, the
     section fell short of the screen on windows tall for their width (her note) */
  .product .viz { max-height: none; }
}
/* The product running live on its card (site.js): laid out at a desktop width, zoomed out into the drawing's box,
   shown over the drawing once it is ready, and used right there. An icon button in its bottom right corner opens it
   larger, in a window over the dimmed page (the same frame, lifted into the top layer): a slim bar above it names it
   and closes it, and the product is at its own size. The button under the card opens the product's own site. */
.live-screen { position: absolute; inset: 0; overflow: hidden; background: var(--white); opacity: 0; transition: opacity .8s var(--ease); }
.live-screen iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; }
.viz.live-on .live-screen { opacity: 1; }
/* A live product says it can be used: a soft glow at its middle with a word on it (her call: a centre gradient, the
   site's one gradient), gone while the pointer is over the card or the visitor is using it (site.js: .using), back when
   they leave. Never over the product in its window. */
.live-hint { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 46% 46% at 50% 50%, rgba(250, 250, 250, .94), rgba(250, 250, 250, .72) 45%, rgba(250, 250, 250, 0)); transition: opacity .45s var(--ease); }
.live-hint span { display: inline-flex; align-items: center; gap: 12px; font-size: 22.5px; font-weight: 500; color: var(--ink); }
.live-hint .ic { width: 27px; height: 27px; }
.viz.live-on:not(:hover):not(.using) .live-hint { opacity: 1; }
.live-bar { display: none; }
/* the corner button: the expand icon on a small white tile, over the product's bottom right corner; dark on hover */
.live-expand { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-sm); background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 2px 10px rgba(30, 30, 30, .12); cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s, background-color .15s, color .15s, border-color .15s; }
.viz.live-on .live-expand { opacity: 1; visibility: visible; }
.live-expand .ic { width: 18px; height: 18px; stroke-width: 1.8; }
.live-expand:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.live-expand:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* the window: the product's frame lifted into the top layer (a popover), over the page dimmed and blurred as under the
   contact form; on phones it takes the whole screen */
.live-dim { position: fixed; inset: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: rgba(30, 30, 30, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.live-screen.big { position: fixed; inset: 40px var(--gut); display: flex; flex-direction: column; width: auto; height: auto; max-width: 1440px; max-height: 920px; margin: auto; padding: 0; border: 0; border-radius: var(--r-lg); color: var(--ink); opacity: 1; box-shadow: 0 24px 80px rgba(30, 30, 30, .3); overscroll-behavior: contain; }
.live-screen.big .live-bar { display: flex; flex: none; align-items: center; height: 48px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--rule); background: var(--white); }
.live-screen.big iframe { position: relative; flex: 1; width: 100%; height: auto; transform: none; }
body.live-big { overflow: hidden; }
@media (max-width: 720px) {
  .live-screen.big { inset: 0; max-width: none; max-height: none; border-radius: 0; }
}
.live-name { margin-right: auto; font-size: 14px; font-weight: 500; color: var(--ink); }
.live-x { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: background-color .15s; }
.live-x:hover { background: var(--sand); }
.live-x .ic { width: 16px; height: 16px; }
.live-x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* the button under the card opens the product's own site in a new tab: its arrow points out, and nudges that way */
.prod-link:hover .ic { transform: translate(2px, -2px); }
.product-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; padding: calc(26 * var(--z)) calc(28 * var(--z)) calc(30 * var(--z)); }
.product-copy .h3 { font-size: calc(24 * var(--z)); letter-spacing: -0.015em; }
.product-copy p { grid-column: 1 / -1; max-width: calc(440 * var(--z)); margin-top: calc(10 * var(--z)); font-size: calc(16 * var(--z)); line-height: 1.6; color: var(--grey); text-wrap: pretty; }

/* 05 · Privacy: a dark block inside the frame */
.privacy > .frame { padding-top: calc(110 * var(--z)); padding-bottom: calc(110 * var(--z)); }
/* Where the stories pin, Privacy is a screen of its own, as Solutions is: it lands with its top at the top of the
   screen, and the dark block sits in the middle of what the bar leaves (her note: the section before it showed above
   it, and the block sat off centre) */
@media (min-width: 961px) and (min-height: 700px) {
  .privacy { scroll-margin-top: calc(-1 * (var(--nav-h) + 8px)); }
  /* About: the section after the opening lands with its own top at the top of the screen too (its space on top is
     taller than the bar), so the end of the opening never shows behind the bar (her note) */
  .about-hero + section { scroll-margin-top: calc(-1 * (var(--nav-h) + 8px)); }
  .privacy > .frame { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding-top: calc(var(--nav-h) + 24 * var(--z)); padding-bottom: calc(24 * var(--z)); }
}
.vault { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: calc(32 * var(--z)); padding: calc(56 * var(--z)) calc(24 * var(--z)) calc(56 * var(--z)) calc(56 * var(--z)); border-radius: var(--r-lg); background: var(--dark); color: var(--on-dark); }
.vault .h2 { color: var(--on-dark); }
.vault .tint { color: var(--blue-d); }
.vault .lead { color: var(--on-dark-2); margin-top: calc(26 * var(--z)); }
.pull { max-width: calc(520 * var(--z)); margin-top: calc(30 * var(--z)); padding: calc(4 * var(--z)) 0 calc(4 * var(--z)) calc(22 * var(--z)); border-left: 1px solid var(--blue-d); font: 400 clamp(20px, 1.8vw, calc(24 * var(--z)))/1.4 var(--font); letter-spacing: -0.015em; color: var(--on-dark); }
.priv-viz { width: 100%; aspect-ratio: 1.08; max-height: calc(560 * var(--z)); }

/* 06 · Contact: dark, and compact. The end of the page is Contact and the footer seen together, as on zaro.ai, so the
   bottom of the page never shows half the cloud and the button. site.js measures both: where the screen has the
   room, Contact takes just the height the footer leaves (--fin-h), and at the very bottom both are seen whole. A
   little short of room, the copy may shrink to 82% (--fs) and the footer's mark to 70% of its width (--logo) to fit.
   Far too short, the footer fills the last screen by itself (--foot-fill, the room it adds beneath its links). */
.final { position: relative; overflow: hidden; background: var(--dark); color: var(--on-dark); }
main > .final { border-top-color: var(--dark); }
.final .frame { z-index: 1; border-left: 1px solid var(--dark-rule); border-right: 1px solid var(--dark-rule); }
/* beside the frame, as zaro.ai has dot maps beside its last section: fields of small squares in the site's greys
   (the "sides" drawing, sized and told where the frame is by site.js) */
.final-sides { position: absolute; inset: 0; pointer-events: none; }
.final-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: calc(20 * var(--z)); min-height: var(--fin-h, max(92vh, calc(640 * var(--z)))); }
.final-copy { padding: calc(32 * var(--z) * var(--fs, 1)) 0; }
.final h2 { margin: 0; font: 500 calc(clamp(36px, 4vw, calc(58 * var(--zn))) * var(--fs, 1))/1.04 var(--font); letter-spacing: -0.03em; color: var(--on-dark); text-wrap: balance; }
.final .lead { max-width: calc(620 * var(--zn) * var(--fs, 1)); margin-top: calc(22 * var(--zn) * var(--fs, 1)); font-size: calc(18 * var(--zn) * var(--fs, 1)); color: var(--on-dark-2); }
.final .ctas { margin-top: calc(34 * var(--zn) * var(--fs, 1)); }
.final-viz { align-self: stretch; min-height: calc(300 * var(--zn) * var(--fs, 1)); }

/* Footer: dark, small and plain, as on zaro.ai: three columns of links, the mark large and quiet beneath them, and
   the copyright under it. Its type stays small on big screens: --zf is the zoom, held at 1.1px at most. */
.foot { --zf: min(var(--z), 1.1px); position: relative; overflow: hidden; background: var(--dark); color: var(--on-dark); border-top-color: var(--dark-rule); }
.foot .frame { padding-top: calc(56 * var(--zf)); padding-bottom: calc(56 * var(--zf) + var(--foot-fill, 0px)); }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24 * var(--zf)); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--zf)); }
.foot-h { margin-bottom: calc(6 * var(--zf)); font: 500 calc(14 * var(--zf))/calc(22 * var(--zf)) var(--font); color: var(--on-dark); }
.foot-col a { display: inline-flex; align-items: center; gap: calc(10 * var(--zf)); min-height: calc(24 * var(--zf)); color: var(--rule); font-size: calc(14 * var(--zf)); line-height: 1.2; letter-spacing: .02em; transition: color .15s; }
.foot-col a:hover { color: var(--on-dark); }
/* a page still to come (Nuvola Docs): the name dimmed, not a link, with a small "Coming soon" tag */
.foot-soon { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--zf)) calc(8 * var(--zf)); min-height: calc(24 * var(--zf)); color: var(--rule); opacity: .6; font-size: calc(14 * var(--zf)); line-height: 1.2; letter-spacing: .02em; }
.foot-soon em { padding: calc(2 * var(--zf)) calc(6 * var(--zf)); border: 1px solid var(--dark-rule); border-radius: 99px; font: 400 calc(11 * var(--zf))/1.2 var(--font); font-style: normal; letter-spacing: .02em; }
/* the Connect links: each icon in a small rounded tile, as zaro.ai shows its contact icons */
.soc .tile { display: grid; place-items: center; width: calc(24 * var(--zf)); height: calc(24 * var(--zf)); flex: none; border-radius: calc(6 * var(--zf)); background: var(--dark-tile); color: var(--rule); transition: background-color .15s, color .15s; }
.soc .tile .ic { width: calc(13 * var(--zf)); height: calc(13 * var(--zf)); stroke-width: 1.7; }
.soc:hover .tile { background: var(--blue); color: var(--white); }
.foot-mark { width: min(var(--wrap), calc(100% - 2 * var(--gut))); margin: 0 auto; padding: 0 var(--pad); }
.foot-mark img { width: calc(100% * var(--logo, 1)); }
.foot-base { width: min(var(--wrap), calc(100% - 2 * var(--gut))); margin: 0 auto; padding: calc(22 * var(--zf)) var(--pad) calc(30 * var(--zf)); text-align: right; }
.copy { color: var(--on-dark-3); font-size: calc(12 * var(--zf)); letter-spacing: .02em; }

/* The contact form: a box in the middle of the page, over the page dimmed and blurred, as zaro.ai's "Talk to our
   team": the invitation on a dark panel at the left, with the mark in dots beneath it, and the form on paper at the
   right. Rounded corners and flat fills, like the rest of the site. It covers the screen and keeps scrolling to
   itself, so the page behind stays put. Its sizes grow with big screens only a little (--za). */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ask { --za: min(var(--z), 1.1px); width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: calc(56 * var(--za)) var(--gut) calc(32 * var(--za)); border: 0; background: transparent; color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.ask[open] { display: grid; place-items: center; place-items: safe center; }
.ask::backdrop { background: rgba(30, 30, 30, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* it arrives with a short rise while the page dims, and leaves the same way (site.js adds .closing first); it used to
   appear and go at once */
.ask[open] .ask-in { animation: ask-in .42s var(--ease) both; }
.ask[open]::backdrop { animation: ask-dim .32s var(--ease) both; }
.ask.closing .ask-in { animation: ask-out .24s var(--ease) both; }
.ask.closing::backdrop { animation: ask-undim .24s var(--ease) both; }
@keyframes ask-in { from { opacity: 0; transform: translateY(16px) scale(.985); } }
@keyframes ask-out { to { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes ask-dim { from { opacity: 0; } }
@keyframes ask-undim { to { opacity: 0; } }
/* the box has no fill of its own: each half has its own, so no white shows round the dark half's corners (her note:
   a thin white edge at the top corners, over the dark end of the page) */
.ask-in { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(calc(1160 * var(--za)), 100%); border-radius: calc(24 * var(--za)); }
.ask-x { position: absolute; right: 0; bottom: calc(100% + 8px); display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(30, 30, 30, .6); color: var(--on-dark); cursor: pointer; transition: background-color .15s; }
.ask-x:hover { background: var(--ink); }
.ask-x .ic { width: 16px; height: 16px; }
.ask-x:focus-visible { outline: 2px solid var(--blue-d); outline-offset: 2px; }
.ask-side { position: relative; display: flex; flex-direction: column; align-items: center; padding: calc(40 * var(--za)) calc(48 * var(--za)) 0; border-radius: calc(24 * var(--za)) 0 0 calc(24 * var(--za)); background: var(--dark); color: var(--on-dark); text-align: center; overflow: hidden; }
.ask-logo { width: auto; height: calc(20 * var(--za)); }
.ask-copy { margin: auto 0; padding: calc(36 * var(--za)) 0 calc(12 * var(--za)); }
.ask .label { font-size: calc(11 * var(--za)); color: var(--on-dark-2); }
/* the site's button, at the dialog's own scale */
.ask .bx { height: calc(48 * var(--za)); padding: 0 calc(24 * var(--za)); gap: calc(10 * var(--za)); font-size: calc(16 * var(--za)); }
.ask .bx .ic { width: calc(16 * var(--za)); height: calc(16 * var(--za)); }
.ask-h { margin: calc(14 * var(--za)) 0 0; font: 500 calc(40 * var(--za))/1.15 var(--font); letter-spacing: -0.02em; color: var(--on-dark); text-wrap: balance; }
/* (the panel's heading now comes first: "Talk to our team" above it is gone, her call) */
.ask-copy > .ask-h:first-child { margin-top: 0; }
.ask-h .dim { color: var(--on-dark-2); }
.ask-p { max-width: calc(420 * var(--za)); margin: calc(16 * var(--za)) auto 0; font-size: calc(17 * var(--za)); line-height: 1.5; color: var(--on-dark-2); text-wrap: pretty; }
.ask-viz { align-self: stretch; height: calc(210 * var(--za)); margin: 0 calc(-48 * var(--za)); }
.ask-main { display: flex; flex-direction: column; justify-content: center; padding: calc(40 * var(--za)); border-radius: 0 calc(24 * var(--za)) calc(24 * var(--za)) 0; background: var(--paper); }
.ask-form { display: grid; gap: calc(12 * var(--za)); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12 * var(--za)); }
.fld input, .msg textarea { display: block; width: 100%; height: calc(50 * var(--za)); padding: 0 calc(20 * var(--za)); border: 0; border-radius: calc(12 * var(--za)); background: var(--field); color: var(--ink); font: 400 calc(15 * var(--za))/1.4 var(--font); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s, background-color .15s; }
.msg textarea { height: auto; min-height: calc(112 * var(--za)); padding: calc(15 * var(--za)) calc(20 * var(--za)); resize: vertical; }
.fld input::placeholder, .msg textarea::placeholder { color: var(--label); opacity: 1; }
.fld input:hover, .msg textarea:hover { box-shadow: inset 0 0 0 1px var(--rule-2); }
.fld input:focus, .msg textarea:focus { outline: none; background: var(--white); box-shadow: inset 0 0 0 1px var(--blue); }
.fld input:user-invalid { box-shadow: inset 0 0 0 1px var(--error); }
/* What brings you here: one choice of three, each in a tile like the fields, with a round mark that fills when chosen */
.why { min-width: 0; margin: calc(6 * var(--za)) 0 0; padding: 0; border: 0; }
.why legend, .msg-h { display: block; padding: 0; margin-bottom: calc(8 * var(--za)); font: 500 calc(14 * var(--za))/1.4 var(--font); color: var(--ink); }
.opts { display: flex; flex-wrap: wrap; gap: calc(8 * var(--za)); }
.opt { position: relative; flex: 1 1 auto; display: flex; align-items: center; gap: calc(10 * var(--za)); min-height: calc(46 * var(--za)); padding: calc(8 * var(--za)) calc(14 * var(--za)); border-radius: calc(12 * var(--za)); background: var(--field); font-size: calc(14 * var(--za)); line-height: 1.25; color: var(--ink-2); cursor: pointer; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s, background-color .15s, color .15s; }
.opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.opt .box { display: grid; place-items: center; width: calc(16 * var(--za)); height: calc(16 * var(--za)); flex: none; border: 1px solid var(--outline); border-radius: 50%; background: var(--white); transition: border-color .15s; }
.opt .box::after { content: ""; width: calc(8 * var(--za)); height: calc(8 * var(--za)); border-radius: 50%; background: var(--blue); opacity: 0; transition: opacity .15s; }
.opt:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); }
.opt:has(input:checked) { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--blue); }
.opt input:checked + .box { border-color: var(--blue); }
.opt input:checked + .box::after { opacity: 1; }
.opt:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.msg { display: block; margin-top: calc(6 * var(--za)); }
.ask-go { width: 100%; margin-top: calc(6 * var(--za)); }
.ask-note { font-size: calc(12 * var(--za)); color: var(--grey); }
/* the bots' trap is never seen; Turnstile's check takes no room unless it asks something; a failed send says so */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile:empty { display: none; }
.ask-err { font-size: calc(13 * var(--za)); color: var(--error); }
.ask-go[aria-busy="true"] { opacity: .6; cursor: progress; }
/* After sending, as zaro.ai's: the form gives way to a light blue tile with a check, the thanks, a line naming the
   address we'll write to, and a small text button to send another; the box eases to its new height (site.js) */
.ask-done { display: flex; flex-direction: column; align-items: flex-start; outline: none; }
.ask-done[hidden] { display: none; }
/* the tick (v4 - 6, her call: no blue square, only the circle with its tick, bigger), drawn in once the message goes:
   the circle from the top, then the tick. Round ends (v4 - 10); the hidden dash sits a little before the path, so its
   round cap leaves no dot at the start. */
.ask-tick { width: calc(64 * var(--za)); height: calc(64 * var(--za)); fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ask-tick circle { transform: rotate(-90deg); transform-origin: 32px 32px; }
.ask-done:not([hidden]) .ask-tick circle { stroke-dasharray: 1 2; animation: tick-draw .7s var(--ease) both; }
.ask-done:not([hidden]) .ask-tick path { stroke-dasharray: 1 2; animation: tick-draw .36s var(--ease) .52s both; }
@keyframes tick-draw { from { stroke-dashoffset: 1.08; } to { stroke-dashoffset: 0; } }
.ask-done .ask-h { margin-top: calc(26 * var(--za)); font-size: calc(32 * var(--za)); color: var(--ink); }
.ask-done .ask-p { max-width: calc(440 * var(--za)); margin: calc(14 * var(--za)) 0 0; font-size: calc(15 * var(--za)); color: var(--ink-2); }
.ask-done .ask-p b { font-weight: 400; color: var(--ink); }

.ask-again { margin-top: calc(22 * var(--za)); padding: 0; border: 0; background: none; font: 500 calc(10.5 * var(--za))/1.4 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; transition: color .15s; }
.ask-again:hover { color: var(--blue); }
.ask-again:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* the thanks arrives with a short rise, as the rest of the page's text does */
.ask-done:not([hidden]) > * { animation: rise .6s var(--ease) both; }
.ask-done:not([hidden]) > .ask-tick { animation: none; }
.ask-done:not([hidden]) > :nth-child(2) { animation-delay: .06s; }
.ask-done:not([hidden]) > :nth-child(3) { animation-delay: .12s; }
.ask-done:not([hidden]) > :nth-child(4) { animation-delay: .18s; }

/* Responsive (the zoom is 1px at these widths, so plain pixels are fine here) */
@media (max-width: 960.98px) {
  :root { --pad: 28px; }
  .nav-links { display: none; }
  .menu-btn { display: grid; }
  .hero-in { grid-template-columns: 1fr; min-height: 0; padding-top: calc(var(--nav-h) + 36px); }
  .hero-viz { height: 440px; min-height: 0; margin-bottom: 24px; }
  .sov-grid { grid-template-columns: 1fr; gap: 32px; }
  .stage { height: 440px; min-height: 0; }
  .inf-in { grid-template-columns: 1fr; }
  .inf-viz { height: 520px; min-height: 0; margin-top: 32px; }
  .vault { grid-template-columns: 1fr; padding: 40px 28px; }
  .priv-viz { max-width: 520px; margin: 0 auto; }
  .final-in { grid-template-columns: 1fr; min-height: 0; }
  .final-copy { padding: 96px 0 0; }
  .final-viz { height: 360px; min-height: 0; }
  .final-sides { display: none; }
  .foot-in { grid-template-columns: 1fr; gap: 40px; }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-height: 760px) and (min-width: 861px) {
  .ask { padding-top: 48px; padding-bottom: 12px; }
  .ask-side { padding-top: 28px; }
  .ask-main { padding: 28px 36px; }
  .ask-form, .pair { gap: 9px; }
  .fld input { height: 44px; }
  .opt { min-height: 42px; }
  .msg textarea { min-height: 84px; }
  .ask-viz { height: 170px; }
}
@media (max-width: 860px) {
  .ask { padding: 16px 12px; }
  .ask-in { grid-template-columns: 1fr; }
  .ask-x { top: 8px; right: 8px; bottom: auto; z-index: 2; background: rgba(250, 250, 250, .12); }
  .ask-x:hover { background: rgba(250, 250, 250, .24); }
  .ask-side { padding: 28px 24px 26px; border-radius: calc(24 * var(--za)) calc(24 * var(--za)) 0 0; }
  .ask-copy { margin: 0; padding: 18px 0 0; }
  .ask-h { font-size: 30px; }
  .ask-p { font-size: 16px; }
  .ask-viz { display: none; }
  .ask-main { padding: 24px 20px; border-radius: 0 0 calc(24 * var(--za)) calc(24 * var(--za)); }
  .opt { flex-basis: 100%; }
}
@media (min-width: 961px) { body.menu-open .mnav { display: none; } }
@media (max-width: 720px) {
  :root { --gut: 12px; --pad: 18px; }
  .nav-in { padding: 0 8px 0 14px; }
  .hero h1 { font-size: 12vw; }
  .hero-viz { height: 360px; }
  .pin > .frame, .build > .frame, .privacy > .frame { padding-top: 84px; padding-bottom: 84px; }
  .stage { height: 360px; }
  .inf-viz { height: 440px; }
  .inf-label { font-size: 11px; padding: 3px 6px; }
  .products { grid-template-columns: 1fr; margin-top: 40px; }
  /* the products' previews a little taller on phones (her call) */
  .product .viz { height: 400px; max-height: none; }
  /* the footer's three columns in one row on phones: a little smaller and closer (her call) */
  .foot-cols { gap: 12px; }
  .foot-h { font-size: 13px; line-height: 20px; }
  .foot-col { gap: 4px; }
  .foot-col a { gap: 7px; font-size: 12.5px; letter-spacing: .01em; }
  .foot-soon { font-size: 12.5px; letter-spacing: .01em; }
  .foot-soon em { font-size: 10px; padding: 1px 5px; }
  .soc .tile { width: 22px; height: 22px; }
  .product-copy { padding: 22px 20px 26px; }
  .vault { padding: 32px 18px; }
  .final-viz { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}
/* no pinning with reduced motion: undo the pinned layout where it would otherwise apply */
@media (prefers-reduced-motion: reduce) and (min-width: 961px) and (min-height: 700px) {
  .js .story { height: auto; }
  .js .pin { position: relative; height: auto; overflow: visible; }
  .js .pin > .frame { height: auto; padding-top: calc(110 * var(--z)); padding-bottom: calc(110 * var(--z)); }
  .js .pin > .sov-in { display: block; }
}

/* ---------- v4 - 7 · the About page (about.html) ----------
   Built from the site's own parts: the frame, labels, two-tone headlines, the pinned list beside a white rounded stage,
   white cards, the dark end with its fields of squares. Its pacing and type sizes follow zaro.ai's "Why Zaro" page. */
.nav-links a[aria-current="page"], .mnav a[aria-current="page"] { color: var(--ink); }

/* Story (her layout): one screen tall. The paragraphs at the top left, the first about 30% smaller than it was (31 to
   22); under them a grey panel with who we are, joined to the grey frame round the team photo, which takes the full
   height on the right; where they meet, the panel curves up into the frame. The photo fills its frame and is cropped
   from the centre, so a wider or taller screen shows more of it. Her lines: the block is as tall as its words (the
   photo's top just above About, its foot level with the panel's) and sits in the middle of the screen; the photo
   reaches out to the right edge of the nav's Get in touch, the panel as far out on the left (to the logo's edge),
   its words in line with the paragraphs above (--ab-out: how far the nav's content runs past the page's). */
.about-in { --ab-r: var(--r-lg); --ab-pad: calc(7 * var(--z)); --ab-out: calc(var(--pad) - 10px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; min-height: 100vh; padding-top: calc(var(--nav-h) + 24 * var(--z)); padding-bottom: calc(24 * var(--z)); }
/* the block about 10% taller than its words need (her call): more air above, below and inside the panel, but never
   so much that the block outgrows a short screen (each space also capped by the screen's height) */
.about-copy { padding: min(calc(40 * var(--z)), 3.7vh) calc(48 * var(--z)) min(calc(56 * var(--z)), 4.6vh) 0; }
.about-copy h1 { margin: 0; }
.about-lede { max-width: calc(680 * var(--z)); margin: calc(22 * var(--z)) 0 0; font: 500 clamp(19px, 1.5vw, calc(22 * var(--z)))/1.3 var(--font); letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }
.about-lede .dim { color: var(--ink-2); }
.about-p { margin-top: calc(28 * var(--z)); }
.about-copy > * { animation: rise .9s var(--ease) both; }
.about-copy > .about-lede { animation-delay: .12s; }
.about-copy > .about-p { animation-delay: .3s; }
.about-photo { grid-column: 2; grid-row: 1 / 3; position: relative; min-height: calc(360 * var(--z)); margin: 0 calc(-1 * var(--ab-out)) 0 0; padding: var(--ab-pad); background: var(--sand); border-radius: var(--ab-r) var(--ab-r) var(--ab-r) 0; animation: rise .9s var(--ease) .2s both; }
.about-photo picture { position: absolute; inset: var(--ab-pad); }
.about-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: var(--paper); border-radius: calc(var(--ab-r) - var(--ab-pad)); }
.about-team { grid-column: 1; grid-row: 2; position: relative; margin-left: calc(-1 * var(--ab-out)); padding: min(calc(42 * var(--z)), 3.9vh) calc(40 * var(--z)) min(calc(44 * var(--z)), 4.1vh) var(--ab-out); background: var(--sand); border-radius: var(--ab-r) 0 0 var(--ab-r); animation: rise .9s var(--ease) .4s both; }
/* the inner curve: the panel rising into the photo's frame */
.about-team::after { content: ""; position: absolute; right: 0; bottom: 100%; width: var(--ab-r); height: var(--ab-r); background: radial-gradient(circle at 0 0, transparent calc(var(--ab-r) - .5px), var(--sand) var(--ab-r)); }
/* who we are, set as the first paragraph is (her call): the same size and weight, its first sentence dark, the rest grey */
.about-team p { max-width: calc(680 * var(--z)); margin: 0; font: 500 clamp(19px, 1.5vw, calc(22 * var(--z)))/1.3 var(--font); letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }
.about-team .dim { color: var(--ink-2); }
/* screens short for their width: the words wider (fewer lines), the photo narrower, so the block still fits */
@media (min-width: 961px) and (max-height: 860px) {
  .about-in { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .about-p { line-height: 1.5; }
}
/* narrower laptops: the text wider, the photo narrower, so the section still fits on one screen */
@media (min-width: 961px) and (max-width: 1240px) {
  .about-in { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); padding-top: calc(var(--nav-h) + 12 * var(--z)); padding-bottom: calc(12 * var(--z)); }
  .about-copy { padding-right: calc(40 * var(--z)); padding-top: min(calc(34 * var(--z)), 1.8vh); padding-bottom: min(calc(42 * var(--z)), 2.2vh); }
  .about-team { padding: min(calc(30 * var(--z)), 1.6vh) calc(28 * var(--z)) min(calc(32 * var(--z)), 1.8vh) var(--ab-out); }
}


/* What ownership needs: the pinned list beside its drawing (the Sovereignty section's parts), numbered as zaro's */
.own .sov-side .label { margin-top: 0; }
.own .sov-side .h2 { margin-top: calc(18 * var(--z)); }
.own-viz { position: absolute; inset: 0; }
.own-list .no { flex: none; width: calc(40 * var(--z)); font: 500 clamp(17px, 1.4vw, calc(20 * var(--z)))/1.3 var(--font); font-variant-numeric: tabular-nums; color: inherit; }
.own-list .sov-bd p { color: var(--ink-2); }
.wo { margin-right: .45em; font: 500 calc(10.5 * var(--z))/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--label); }

/* Before / With Nuvola: two columns, the same three labels on both, cards over a field of dots */
.bw > .frame { padding-top: calc(130 * var(--z)); padding-bottom: calc(130 * var(--z)); }
.bw-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--z)); }
.bw-tag { display: flex; align-items: center; gap: calc(10 * var(--z)); margin: 0; font: 500 calc(16 * var(--z))/1.5 var(--font); color: var(--ink); }
.bw-tag .sq { width: calc(8 * var(--z)); height: calc(8 * var(--z)); border-radius: calc(2 * var(--z)); background: var(--ink-2); }
.bw-with .bw-tag .sq { background: var(--blue); }
.bw-h { max-width: calc(560 * var(--z)); min-height: 2.36em; margin: calc(20 * var(--z)) 0 0; font: 500 clamp(26px, 2.6vw, calc(38 * var(--z)))/1.18 var(--font); letter-spacing: -0.02em; text-wrap: balance; }
.bw-before .bw-h { color: var(--grey); }
.bw-with .bw-h { color: var(--ink); }
.bw-panel { position: relative; display: flex; align-items: center; margin-top: calc(40 * var(--z)); padding: calc(44 * var(--z)) calc(40 * var(--z)); min-height: calc(440 * var(--z)); border-radius: var(--r-lg); overflow: hidden; }
.bw-before .bw-panel { background: var(--sand); }
.bw-with .bw-panel { background: var(--sky3); }
.bw-panel .field-viz { position: absolute; inset: 0; }
.bw-cards { position: relative; display: grid; gap: calc(12 * var(--z)); width: 100%; margin: 0; }
.bw-card { padding: calc(18 * var(--z)) calc(22 * var(--z)) calc(20 * var(--z)); border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--white); }
.bw-card dt { display: flex; align-items: center; gap: calc(8 * var(--z)); font: 500 calc(13 * var(--z))/1.4 var(--font); letter-spacing: .01em; color: var(--label); }
.bw-card dt .ic { width: calc(14 * var(--z)); height: calc(14 * var(--z)); stroke-width: 2; }
.bw-before .bw-card dt .ic { color: var(--grey); }
.bw-with .bw-card dt .ic { color: var(--blue); }
.bw-card dd { margin: calc(6 * var(--z)) 0 0; font: 500 clamp(17px, 1.4vw, calc(20 * var(--z)))/1.4 var(--font); letter-spacing: -0.005em; color: var(--ink); }
.bw-before .bw-card dd { color: var(--ink-2); }

/* A file's journey: the drawing on a white card, the four step names placed where it leaves room for them (before
   the drawing places them, or without it, they sit in a row along the bottom) */
.journey > .frame { padding-top: calc(110 * var(--z)); padding-bottom: calc(110 * var(--z)); }
.flow { background: var(--white); border-radius: var(--r-lg); overflow: hidden; }
.flow-viz { aspect-ratio: 7 / 2; }
.flow-steps { margin: 0; padding: 0; list-style: none; }
.flow-label { position: absolute; left: 0; top: 0; translate: -50% 0; width: max-content; max-width: calc(200 * var(--z)); font: 500 calc(11.5 * var(--z))/1.45 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-align: center; opacity: 0; }
.flow-label.left { translate: 0 -50%; text-align: left; }
.flow-viz:not(.placed) .flow-steps { position: absolute; inset: auto 0 calc(28 * var(--z)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flow-viz:not(.placed) .flow-label { position: static; translate: none; width: auto; max-width: none; margin: 0 auto; padding: 0 12px; opacity: 1; }

/* Closing: the line, centred and in two tones as zaro's, and Get in touch, on the dark end of the page */
/* (no vertical rules here: she keeps them only on the home page's cloud section) */
.about-end .frame { border-left: 0; border-right: 0; }
.about-end .final-in { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.about-end h2 { max-width: calc(920 * var(--zn)); font-size: calc(clamp(40px, 5vw, calc(72 * var(--zn))) * var(--fs, 1)); letter-spacing: -0.035em; }
.about-end h2 .dim { color: var(--on-dark-3); }
.about-end .ctas { display: flex; justify-content: center; }

@media (max-width: 960.98px) {
  /* the paragraphs, then one grey card: the photo (cropped from the centre), who we are under it */
  .about-in { --ab-r: 20px; --ab-pad: 6px; grid-template-columns: 1fr; grid-template-rows: auto; min-height: 0; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 48px; }
  .about-copy { padding: 0 0 28px; }
  .about-photo { grid-column: 1; grid-row: auto; min-height: 0; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--ab-r) var(--ab-r) 0 0; }
  .about-team { grid-column: 1; grid-row: auto; margin: 0; padding: 18px 16px 24px; border-radius: 0 0 var(--ab-r) var(--ab-r); }
  .about-team::after { display: none; }
  .bw-in { grid-template-columns: 1fr; gap: 64px; }
  .bw-h { min-height: 0; }
  .bw-panel { padding: 28px 22px; min-height: 0; }
  .flow-viz { aspect-ratio: auto; height: 820px; }
  /* the closing line and its button in the middle of the dark block: as much room below as above (the home page's
     cloud comes under its copy there, so its copy has none below; this page has no cloud) */
  .about-end .final-copy { padding: 96px 0; }
}
@media (max-width: 720px) {
  /* on phones the photo a little taller than wide, as in her layout */
  .about-photo { aspect-ratio: 1 / 1.05; }
  .flow-viz { height: 640px; }
  .flow-viz:not(.placed) .flow-steps { grid-template-columns: 1fr 1fr; row-gap: 14px; }
}

/* Home page, her call: Sovereignty's drawing stands on the page with no white box round it, and neither list has rules
   between its rows (Sovereignty's three dimensions, Technology's four layers). The About page keeps its own. */
#sovereignty .stage { background: none; border-radius: 0; }
#sovereignty .sov-list, #sovereignty .sov-list li, #technology .layers, #technology .layer { border: 0; }