/* Egg Stone - Option B "Editorial": full-bleed hero video on the home page only,
   light pages with floating bubbles everywhere else, Frutiger Aero colour highlights, liquid glass. */
:root {
  --ink: #0b2540; --ink2: #5b7286; --bg: #f4faff; --card: rgba(255, 255, 255, .5);
  --line: rgba(11, 37, 64, .1); --soft: rgba(11, 37, 64, .06);
  --sky: #0a84ff; --aqua: #00b4d8; --grass: #34a51b; --lime: #b8f03c; --navy: #0b2540;
  --font: "Avenir Next Cyr", "Avenir Next", "Google Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --max: 1180px;
  --bar: rgba(244, 250, 255, .5); /* pinned header over content: glass, but readable over big type */
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #eaf6ff; --ink2: #9fb7c9; --bg: #06121f; --card: rgba(255, 255, 255, .07); --line: rgba(255, 255, 255, .12); --soft: rgba(255, 255, 255, .08); --bar: rgba(6, 18, 31, .55); }
}
* { box-sizing: border-box; }
html { scroll-padding-top: 100px; }
html, body { margin: 0; }
body { min-height: 100svh; display: flex; flex-direction: column; font: 500 17px/1.55 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg, video { display: block; }
h1, h2, h3, p, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2 { font-weight: 400; letter-spacing: -.02em; line-height: 1.04; }
h3 { font-weight: 700; line-height: 1.2; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #ffbf1a; outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 60; padding: 10px 16px; border-radius: 999px; background: var(--navy); color: #fff; }
.skip:focus { top: 12px; }

/* page transitions between pages, no JS */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; animation-timing-function: var(--ease); }

/* Frutiger Aero highlights */
.hl-sky { color: var(--sky); }
.hl-grass { color: var(--grass); }
.hl-aero { background: linear-gradient(90deg, #0a84ff, #00bfd0 50%, #38b51f); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- liquid glass ---------- */
.g {
  position: relative; border-radius: 28px; background: var(--card);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 1.5px 1.5px 1px -.5px rgba(255, 255, 255, .95), inset -1.5px -1.5px 1px -.5px rgba(255, 255, 255, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .5), 0 10px 30px rgba(20, 80, 140, .12);
}
.hero .g, .photo .g, .shotbox .g {
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 1.5px 1.5px 1px -.5px rgba(255, 255, 255, .9), inset -1.5px -1.5px 1px -.5px rgba(255, 255, 255, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .25), 0 6px 22px rgba(0, 30, 60, .2);
}
.g .g { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) {
  .g { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero .g, .photo .g { background: rgba(10, 40, 70, .9); }
}
@media (prefers-color-scheme: dark) and (prefers-reduced-transparency: reduce) { .g { background: #10263a; } }

/* ---------- home hero (the only place with video) ---------- */
.hero { position: relative; overflow: hidden; color: #fff; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; padding: 96px 0 28px; }
.hero > .wrap { flex: 1; display: grid; }
.hero .poster, .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0, 25, 50, .55), rgba(0, 25, 50, 0) 55%), linear-gradient(to bottom, rgba(0, 25, 50, .25), rgba(0, 25, 50, 0) 30%); }
.hero .low { align-self: end; display: grid; gap: 18px; max-width: 800px; }
.hero h1 { font-size: clamp(3rem, 9vw, 7rem); line-height: .98; }
.hero .desc { display: flex; gap: 10px; max-width: 42ch; font-size: .95rem; opacity: .95; }
.hero .desc svg { flex: none; width: 14px; height: 17px; margin-top: 4px; }
.hero .acts { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.explore { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; min-height: 44px; }
.explore svg { width: 18px; height: 18px; }

/* ---------- nav ---------- */
/* Header stays on screen: sticky on light pages, fixed over the home hero. "on-hero" (white, over the
   video) and "stuck" (scrolled over content: the logo gets its own glass chip) are toggled by site.js. */
/* No view-transition-name / filter / opacity / will-change on .top: each makes it a backdrop root and
   the glass inside then blurs nothing (the page behind is cut off). */
.top { position: sticky; top: 12px; z-index: 40; margin-top: 12px; transition: color .25s; }
.home .top { position: fixed; left: 0; right: 0; margin-top: 0; }
.on-hero { color: #fff; }
.top .brand { margin-left: -14px; padding: 0 14px; border-radius: 999px; transition: background-color .25s, box-shadow .25s; }
.top.stuck .nav, .top.stuck .menu summary { background: var(--bar); }
.top.stuck .brand { background: var(--bar); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 1.5px 1.5px 1px -.5px rgba(255, 255, 255, .95), inset -1.5px -1.5px 1px -.5px rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 10px 30px rgba(20, 80, 140, .12); }
.top .nav { transition: background-color .25s; }
.on-hero .nav { background: rgba(255, 255, 255, .12); }
/* logo on its own at the left, glass menu bar centred, action at the right */
.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.bar-end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav { padding: 6px; border-radius: 999px; }
.brand { justify-self: start; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; text-decoration: none; min-height: 44px; }
.brand svg { width: 18px; height: 22px; }
.links { display: flex; }
.links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-size: .95rem; }
.links a:hover, .links a[aria-current="page"] { background: var(--soft); }
.on-hero .links a:hover { background: rgba(255, 255, 255, .18); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.on-hero .menu summary { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 22px; height: 22px; }
.menu ul { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; padding: 8px; border-radius: 22px; background: #0b2540; color: #fff; box-shadow: 0 14px 40px rgba(0, 20, 50, .35); }
.menu li a { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: 14px; text-decoration: none; font-weight: 600; }
.menu li a:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 900px) { .bar { grid-template-columns: 1fr auto; } .nav, .bar .hide-m { display: none; } .menu { display: block; } }

/* ---------- pills, chips, tags ---------- */
.pill { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 6px 0 24px; border-radius: 999px; border: 0; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), filter .2s; }
.pill:hover { transform: translateY(-1px); filter: brightness(1.05); }
.pill:active { transform: scale(.98); }
.pill .arr { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.pill .arr svg { width: 20px; height: 20px; }
.pill.plain { padding: 0 24px; }
.pill.small { min-height: 44px; padding-right: 4px; }
.pill.small .arr { width: 36px; height: 36px; }
.pill.lime { background: var(--lime); color: #0b2540; }
.pill.lime .arr { background: #0b2540; color: #fff; }
.pill.dark { background: #0b2540; color: #fff; }
.pill.dark .arr { background: var(--lime); color: #0b2540; }
@media (prefers-color-scheme: dark) { .pill.dark { background: #eaf6ff; color: #0b2540; } .pill.dark .arr { background: #0b2540; color: var(--lime); } }
.pill.ghost { color: var(--ink); background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.pill[aria-disabled="true"], .pill:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.chips button[aria-pressed="true"] { background: #0b2540; color: #fff; box-shadow: none; }
@media (prefers-color-scheme: dark) { .chips button[aria-pressed="true"] { background: #eaf6ff; color: #0b2540; } }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--soft); }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--lime); }
.dot.dev { background: #ffb02e; }
.dot.old { background: #a9b6c4; }

/* ---------- light pages with floating bubbles ---------- */
.light { position: relative; isolation: isolate; overflow: hidden; flex: 1;
  background: radial-gradient(55% 35% at 8% 0%, rgba(110, 205, 255, .28), transparent 70%),
    radial-gradient(45% 35% at 95% 35%, rgba(140, 225, 110, .2), transparent 70%),
    radial-gradient(50% 30% at 30% 90%, rgba(90, 190, 255, .18), transparent 70%), var(--bg); }
.page .light { margin-top: -80px; padding-top: 80px; }
/* Bubbles: liquid glass lenses (site.js refracts what is under them, no blur) that rise through the
   whole page and sway. In front of the content, but never catch the pointer. Height comes from the
   container (cqh), so they cross a short page and a long one alike. */
.bubbles { position: absolute; inset: 0; z-index: 5; pointer-events: none; container-type: size; }
.bub { position: absolute; top: var(--t); }
.bubble.g { position: absolute; inset: 0; border-radius: 50%;
  -webkit-backdrop-filter: none; backdrop-filter: none; /* Safari/Firefox: clear bubble, no frosted blur over text */
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .95) 0 6%, rgba(255, 255, 255, 0) 18%),
    radial-gradient(circle, rgba(255, 255, 255, 0) 60%, rgba(160, 220, 255, .35) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), inset 5px -7px 14px rgba(255, 130, 215, .22), inset -7px 5px 14px rgba(40, 190, 255, .3); }
@media (prefers-reduced-motion: no-preference) {
  .bub { top: 100%; will-change: transform; animation: rise var(--d, 90s) linear var(--delay, 0s) infinite; }
  .bubble.g { animation: sway var(--sw) ease-in-out infinite alternate; }
}
@keyframes rise { to { transform: translateY(calc(-100cqh - 100%)); } }
@keyframes sway { from { translate: calc(var(--x) * -1) 0; } to { translate: var(--x) 0; } }

/* ---------- sections ---------- */
main { display: grid; }
.sec { padding: 88px 0; display: grid; gap: 28px; }
.sec.tight { padding-top: 32px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.eyebrow svg { width: 16px; height: 16px; }
.split { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; max-width: 22ch; }
.split .rest { color: var(--ink2); }
.pagehead { padding: 72px 0 8px; display: grid; gap: 16px; }
.pagehead h1 { font-size: clamp(2.8rem, 8vw, 5.6rem); line-height: .98; }
.lead { font-size: 1.15rem; color: var(--ink2); max-width: 56ch; }
.head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.head h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; min-height: 44px; text-decoration: none; }
.more svg { width: 18px; height: 18px; }
.muted { color: var(--ink2); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cardc { padding: 28px; display: grid; gap: 14px; align-content: start; }
.cardc h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.list li { display: flex; gap: 12px; align-items: baseline; }
.list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--sky), var(--grass)); transform: translateY(-2px); }
.stack { display: grid; gap: 10px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; }
.kv dt { color: var(--ink2); } .kv dd { font-weight: 700; }
hr { border: 0; height: 1px; margin: 0; background: var(--line); }

/* photo cards: rail on home, grid on /apps/ */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 340px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 20px 20px; margin: 0 -20px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.photo { position: relative; aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden; scroll-snap-align: start; text-decoration: none; color: #fff; transition: transform .35s var(--ease); background: #cfe6f5; }
.photo:hover { transform: translateY(-4px); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .cap { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 12px 14px; border-radius: 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-shadow: 0 1px 2px rgba(0, 30, 60, .4); }
.photo .cap b { display: block; font-size: 1.05rem; }
.photo .cap small { display: flex; align-items: center; opacity: .95; }
.photo .cap .arr { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: #0b2540; }
.photo .cap .arr svg { width: 18px; height: 18px; }
.photo .badge { position: absolute; top: 12px; left: 12px; }

/* why list + stat card */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.rows { display: grid; gap: 12px; align-content: start; }
.rowi { padding: 16px 18px; border-radius: 20px; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: center; }
.rowi .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--grass); background: rgba(120, 210, 90, .16); }
.rowi .ic svg { width: 18px; height: 18px; }
.rowi p { grid-column: 2; color: var(--ink2); font-size: .92rem; }
.statwrap { position: relative; border-radius: 28px; overflow: hidden; min-height: 380px; }
.statwrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stat { position: absolute; left: 24px; right: 24px; bottom: 24px; padding: 18px; border-radius: 22px; color: #fff; display: grid; gap: 10px; }
.stat .big { font-size: 2.4rem; font-weight: 400; letter-spacing: -.02em; line-height: 1; }
.bars { display: flex; align-items: end; gap: 8px; height: 64px; }
.bars i { flex: 1; border-radius: 8px; background: rgba(255, 255, 255, .35); }
.bars i:last-child { background: var(--lime); }
.band { padding: 36px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.band h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.cardc input { min-height: 52px; width: 100%; padding: 0 18px; border-radius: 999px; border: 0; font: inherit; color: var(--ink); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--line); }
@media (prefers-color-scheme: dark) { .cardc input { background: rgba(255, 255, 255, .08); } }
.cardc input::placeholder { color: var(--ink2); }
label { font-weight: 700; }

/* app page */
.apphero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; padding: 64px 0 24px; }
.apphero h1 { font-size: clamp(3rem, 8vw, 5.6rem); line-height: .98; }
.apphero .photo { max-width: 360px; width: 100%; justify-self: center; }
.icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, #c4f0ff 0%, #62c9f6 50%, #25a2e4 51%, #7ad8ff 100%); box-shadow: 0 8px 16px rgba(5, 90, 160, .3), inset 0 1px 0 #fff; }
.icon svg { width: 30px; height: 30px; }
.icon.green { background: linear-gradient(180deg, #dcffc2 0%, #8fe060 50%, #4cbf2a 51%, #9ae86f 100%); }
.icon.navy { background: linear-gradient(180deg, #b9d4ff 0%, #4e8ff0 50%, #2563d0 51%, #6ea6ff 100%); }
.acts { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.shotbox { position: relative; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; }
.shotbox img { width: 100%; height: 100%; object-fit: cover; }
.shotbox .play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.shotbox .play svg { width: 34px; height: 34px; }
.shots { display: grid; grid-auto-flow: column; grid-auto-columns: min(46vw, 220px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 16px; margin: 0 -20px; scrollbar-width: none; }
.shots::-webkit-scrollbar { display: none; }
.shots .photo { aspect-ratio: 9 / 19; }

/* lists of people, jobs, posts */
.person { padding: 22px; display: grid; gap: 8px; justify-items: start; }
.avatar { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.2rem; color: #fff;
  background: linear-gradient(135deg, #36a8ff, #3fc95a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }
.job { padding: 20px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.post { padding: 24px; display: grid; gap: 10px; text-decoration: none; align-content: start; transition: transform .3s var(--ease); }
.post:hover { transform: translateY(-3px); }
.post time { font-size: .85rem; font-weight: 700; color: var(--ink2); }
.post h3 { font-size: 1.3rem; }
.prose { padding: 40px; display: grid; gap: 16px; max-width: 780px; }
.prose h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.prose h2 { font-size: 1.5rem; margin-top: 8px; }
.prose time { font-weight: 700; color: var(--ink2); }

/* footer */
.foot { padding: 56px 0 32px; display: grid; gap: 28px; border-top: 1px solid var(--line); }
.fcols { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 24px; }
.fcols h3 { font-size: .95rem; margin-bottom: 8px; }
.fcols a { display: inline-flex; min-height: 36px; align-items: center; text-decoration: none; color: var(--ink2); }
.fcols a:hover { color: var(--ink); }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--ink2); font-size: .9rem; }
.bigword { font-size: clamp(4rem, 16vw, 13rem); font-weight: 400; letter-spacing: -.04em; line-height: .85; color: transparent; -webkit-text-stroke: 1px rgba(11, 37, 64, .14); user-select: none; }
@media (prefers-color-scheme: dark) { .bigword { -webkit-text-stroke-color: rgba(255, 255, 255, .14); } }

/* scroll-driven reveal, CSS only */
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .reveal { animation: reveal both var(--ease); animation-timeline: view(); animation-range: entry 0% entry 35%; } } }
@keyframes reveal { from { opacity: 0; transform: translateY(28px); } }

@media (max-width: 900px) {
  .why, .grid2, .grid3, .fcols, .apphero { grid-template-columns: 1fr; }
  .sec { padding: 64px 0; }
  .band, .cardc { padding: 24px; }
  .prose { padding: 26px; }
  .pagehead { padding-top: 48px; }
  .apphero { padding-top: 40px; }
}
body.page main { flex: 1; }

/* hero: no element shadows at all (owner, 2026-11-09) - glass keeps only its inner rim light */
.hero, .hero *, .on-hero, .on-hero * { text-shadow: none; }
.hero .g, .on-hero .g { box-shadow: inset 1.5px 1.5px 1px -.5px rgba(255, 255, 255, .9), inset -1.5px -1.5px 1px -.5px rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .25); }
.on-hero .menu ul { box-shadow: none; }