/* Shared styles for the new laia.org pages: /newlanding5 and the /advisory/* study pages.
   /assets/* is cached forever (see _headers), so bump the ?v= on every <link> to this file
   whenever it changes. */
:root {
  --ink: #101828;
  --ink-2: #475467;
  --ink-3: #667085;
  --line: #eaecf0;
  --soft: #f9fafb;
  --hi: #ff0;
  --night: #0b0f17;
  --footing: #3b82f6;
  --flood: #ef4444;
  --parcely: #34d399;
  --wrap: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* anchor targets stop below the 68px sticky header instead of under it */
[id] { scroll-margin-top: 68px; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font: 400 17px/1.55 "Space Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, video { display: block; max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.hl { box-shadow: inset 0 -0.32em var(--hi); }
.eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; }
h3 { font-size: 24px; line-height: 1.2; }
p { margin: 0; }
.lede { font-size: 19px; color: var(--ink-2); max-width: 640px; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 8px; font-weight: 500; font-size: 15px; text-decoration: none; border: 1px solid var(--ink); transition: transform .15s, background .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-light { background: #fff; color: var(--ink); border-color: #d0d5dd; }
.btn-light:hover { border-color: var(--ink); }
.link { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.link:hover { box-shadow: inset 0 -0.35em var(--hi); }
.arrow::after { content: "→"; }

/* header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.logo { font-size: 36px; line-height: 43px; font-weight: 700; text-decoration: none; letter-spacing: -0.01em; }   /* as tall as the buttons (43px) */
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; }
.nav a:not(.btn):hover { box-shadow: inset 0 -0.35em var(--hi); }
.menu { display: none; }
/* phones: a plain three-line (burger) icon, as on laia.org, that turns into an X when open. The
   summary's text ("Menu") is hidden visually; its aria-label still names it. */
.menu summary { list-style: none; cursor: pointer; display: block; position: relative; width: 40px; height: 40px; margin-right: -8px;
  font-size: 0; color: transparent; -webkit-tap-highlight-color: transparent; }
.menu summary::before, .menu summary::after { content: ""; position: absolute; left: 9px; right: 9px; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.menu summary::before { top: 13px; box-shadow: 0 6px 0 var(--ink); }   /* top line, its shadow the middle one */
.menu summary::after { top: 25px; }
.menu[open] summary::before { transform: translateY(6px) rotate(45deg); box-shadow: none; }
.menu[open] summary::after { transform: translateY(-6px) rotate(-45deg); }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] .menu-panel { display: flex; }
.menu-panel { display: none; position: absolute; left: 0; right: 0; top: 68px; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; padding: 8px 24px 20px; }
.menu-panel a { padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; }
@media (max-width: 860px) { .nav { display: none; } .menu { display: block; } }

/* hero */
.hero { padding: 88px 0 72px; }
.hero h1 { font-size: clamp(38px, 5.6vw, 68px); line-height: 1.04; max-width: 1000px; }

/* hero slider: the three products, then one Advisory slide, cross-fading like the
   old homepage (4s, 0.8s fade). Proportions follow the old homepage too: 36rem tall at its
   1280px container, so about 20:9, never below its 15rem phone height. */
.slider { position: relative; margin-top: 40px; width: 100%; aspect-ratio: 20 / 9; min-height: 240px; max-height: 576px; border-radius: 14px; overflow: hidden; background: var(--night); }
.slide { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.slide.is-on { opacity: 1; visibility: visible; transition: opacity .8s ease; }
.slide video, .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide video.fit { object-fit: contain; background: #090d16; }
.slide::after { pointer-events: none; content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, rgba(0,0,0,.35)); }
/* only the button links; it is a .btn-light, so it behaves like every other button */
.pill { position: absolute; z-index: 2; left: 20px; bottom: 20px; }
.pill::after { content: "→"; }
.kind { position: absolute; z-index: 1; left: 20px; top: 20px; background: rgba(16,24,40,.75); color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; backdrop-filter: blur(6px); }
@media (max-width: 560px) { .pill { left: 12px; bottom: 12px; font-size: 14px; padding: 8px 12px; } .kind { left: 12px; top: 12px; } }
.hero .lede { margin-top: 24px; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* fade in from black on load, like the old homepage but shorter (0.3s hold, 0.7s fade, 1s in all). CSS only, so the
   page never stays covered if a script fails. */
.curtain { position: fixed; inset: 0; z-index: 100; background: #000; pointer-events: none; animation: lift .7s ease .3s forwards; }
@keyframes lift { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .curtain { display: none; } }
.arc { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.arc a { text-decoration: none; padding: 20px 24px 4px 0; position: relative; }
.arc a::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--c); }
.arc .step { font-size: 13px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.arc .name { font-size: 22px; font-weight: 600; margin-top: 4px; }
.arc .q { color: var(--ink-2); font-size: 15px; margin-top: 4px; max-width: 300px; }
@media (hover: hover) { .arc a:hover .name { box-shadow: inset 0 -0.35em var(--hi); display: inline; } }   /* touch screens keep :hover on the last tapped link */
@media (max-width: 720px) { .arc { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--ink); margin-left: 5px; } .arc a { padding: 0 0 22px 22px; } .arc a::before { top: 6px; left: -6px; } }

/* products */
section { padding: 96px 0; }
.sec-head { max-width: 720px; margin-bottom: 56px; }
.sec-head .lede { margin-top: 16px; }
/* section labels (Products, Advisory · The Lab, Also from LAIA…): the LAIA yellow highlighter,
   the same mark as "site" and "doorstep" in the hero */
.sec-head .eyebrow { display: inline-block; color: var(--ink); font-weight: 600; font-size: 14px; letter-spacing: .1em; padding: 0 3px; box-shadow: inset 0 -0.55em var(--hi); margin-bottom: 18px; }
.product { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding: 48px 0; border-top: 1px solid var(--line); }
.product:nth-of-type(even) .media { order: 2; }
.media { position: relative; border-radius: 14px; overflow: hidden; background: var(--night); aspect-ratio: 16 / 10; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media video.fit { object-fit: contain; background: #090d16; }
.media .cap { position: absolute; left: 14px; bottom: 14px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; padding: 6px 10px; border-radius: 6px; backdrop-filter: blur(6px); }
.media .cap::before { content: "●"; color: #ef4444; margin-right: 6px; font-size: 10px; vertical-align: 1px; }
.tag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.product h3 { font-size: clamp(30px, 3.4vw, 40px); margin: 10px 0 6px; }
.product .pitch { font-size: 21px; font-weight: 500; margin-bottom: 14px; }
.product .body { color: var(--ink-2); }
.facts { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 10px; font-size: 15px; }
.facts li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.facts b { font-weight: 500; color: var(--ink-3); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding-top: 2px; }
.product .ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; gap: 28px; } .product:nth-of-type(even) .media { order: 0; } }

/* advisory */
.advisory { background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.studies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.study { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; }
.study h3 { font-size: 22px; margin-bottom: 10px; }
.study .for { font-size: 14px; color: var(--ink-3); margin-bottom: 16px; }
.study .what { color: var(--ink-2); font-size: 16px; flex: 1; }
.study dl { margin: 22px 0 0; font-size: 14px; display: grid; gap: 8px; }
.study dl div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.study dt { color: var(--ink-3); white-space: nowrap; }
.study dd { margin: 0; font-weight: 500; text-align: right; }
.study .link { margin-top: 22px; align-self: flex-start; }
.terms { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 32px; font-size: 15px; color: var(--ink-2); }
.terms span::before { content: "✓"; margin-right: 8px; color: var(--ink); font-weight: 600; }
@media (max-width: 900px) { .studies { grid-template-columns: 1fr; } }

/* the Lab: six verticals, each as expertise → product → how to start. Image under the text on
   desktop, to its right on phones. */
.lab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vert { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.vert-body { flex: 1; display: flex; flex-direction: column; }
.vert h3 { font-size: 21px; }
.vert h3 a { text-decoration: none; }
.vert h3 a:hover { box-shadow: inset 0 -0.35em var(--hi); }
.vert p { color: var(--ink-2); font-size: 15px; margin-top: 6px; flex: 1; }
.vert dl { margin: 16px 0 0; font-size: 14px; display: grid; gap: 6px; }
.vert dl div { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 6px; }
.vert dt { color: var(--ink-3); white-space: nowrap; }
.vert dd { margin: 0; font-weight: 500; text-align: right; }
.vert dd a { text-decoration: none; border-bottom: 1px solid currentColor; }
.vert dd a:hover { box-shadow: inset 0 -0.35em var(--hi); }
.vert img { width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 8px; background: var(--line); }
@media (max-width: 900px) { .lab { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .lab { grid-template-columns: 1fr; gap: 12px; }
  .vert { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px; }
  .vert img { width: 84px; height: 84px; aspect-ratio: auto; flex: none; border-radius: 6px; }
  .vert dl div { flex-direction: column; gap: 0; }
  .vert dd { text-align: left; }
}
.studies-head { margin: 80px 0 24px; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.studies-head h3 { font-size: 26px; }
.studies-head p { color: var(--ink-2); max-width: 560px; font-size: 16px; margin-top: 8px; }

/* more */
.more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.more a { text-decoration: none; border-top: 2px solid var(--ink); padding-top: 18px; }
.more strong { font-size: 20px; font-weight: 600; }
.more p { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.more a:hover strong { box-shadow: inset 0 -0.35em var(--hi); }
@media (max-width: 760px) { .more { grid-template-columns: 1fr; } }

.partners { padding: 56px 0; border-top: 1px solid var(--line); }
.partners .eyebrow { text-align: center; margin-bottom: 28px; }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 56px; }
.logos a { display: block; width: 120px; height: 48px; background: center / contain no-repeat; filter: grayscale(1); opacity: .65; transition: opacity .15s, filter .15s; }
.logos a:hover { filter: none; opacity: 1; }

/* closing cta */
.cta { background: var(--ink); color: #fff; }
.cta .wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; }
.cta h2 { color: #fff; }
.cta p { color: #cfd4dc; margin-top: 16px; font-size: 18px; max-width: 560px; }
.cta .ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.cta .btn-dark { background: #fff; color: var(--ink); border-color: #fff; }
.cta .btn-dark:hover { background: #f2f4f7; }
.cta .btn-light { background: transparent; color: #fff; border-color: #475467; }
@media (max-width: 800px) { .cta .wrap { grid-template-columns: 1fr; } .cta .ctas { justify-content: flex-start; } }

/* footer */
footer { padding: 72px 0 32px; font-size: 15px; }
.foot { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; }
.foot h4 { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot ul a { text-decoration: none; }
.foot ul a:hover { box-shadow: inset 0 -0.35em var(--hi); }
.news p { color: var(--ink-2); margin: 10px 0 14px; max-width: 320px; }
.news form { display: flex; gap: 8px; max-width: 360px; }
.news input[type=email] { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px; }
.news button { font: inherit; font-size: 15px; font-weight: 500; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; }
.news small { display: block; color: var(--ink-3); margin-top: 10px; font-size: 13px; }
.legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
.legal a { color: inherit; }
@media (max-width: 900px) { .foot { grid-template-columns: 1fr 1fr; } .news { grid-column: 1 / -1; } }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  section { padding: 72px 0; }
  .hero { padding: 56px 0 48px; }
}

/* under the Lab cards */
.lab-foot { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.lab-foot p { color: var(--ink-2); font-size: 15px; }

/* study pages: /advisory/<slug> */
.crumbs { font-size: 14px; color: var(--ink-3); margin-bottom: 20px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { box-shadow: inset 0 -0.35em var(--hi); }
.offer-hero { padding: 72px 0 56px; }
.offer-hero h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; max-width: 900px; }
.offer-hero .lede { margin-top: 20px; }
.offer-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.offer-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
.get { list-style: none; padding: 0; margin: 24px 0 0; counter-reset: g; display: grid; gap: 14px; }
.get li { counter-increment: g; display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 17px; }
.get li::before { content: "0" counter(g); font-size: 13px; font-weight: 500; color: var(--ink-3); padding-top: 4px; }
.facts-card { position: sticky; top: 92px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.facts-card dl { margin: 0; font-size: 15px; display: grid; gap: 10px; }
.facts-card dl div { border-top: 1px solid var(--line); padding-top: 10px; }
.facts-card dl div:first-child { border-top: 0; padding-top: 0; }
.facts-card dt { color: var(--ink-3); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.facts-card dd { margin: 4px 0 0; font-weight: 500; }
.facts-card .btn { margin-top: 22px; width: 100%; justify-content: center; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.steps div { border-top: 2px solid var(--ink); padding-top: 16px; }
.steps b { display: block; font-size: 19px; font-weight: 600; }
.steps p { color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.past { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.past img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.past ul { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 10px; }
.past li a { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }
.past li a:hover { box-shadow: inset 0 -0.35em var(--hi); }
@media (max-width: 900px) {
  .offer-grid, .past { grid-template-columns: 1fr; gap: 32px; }
  .facts-card { position: static; }
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .offer-hero { padding: 48px 0 40px; } }

/* the live Footing globe (an iframe of /embed/footing-globe.html); the poster shows until it loads.
   In the Footing card it ignores the pointer so the card stays a link. */
.globe-bg { background: #0c0f18 url(/assets/newlanding/footing-globe-poster.webp) center / contain no-repeat; }
iframe.globe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.media iframe.globe { pointer-events: none; }
/* narrow screens: the slide button moves to the top-right, opposite the tag, so the Footing globe
   can use the full height below (its iframe keeps 40px free at the top, see ?pt= in footing-globe.html) */
@media (max-width: 700px) { .slider .pill { bottom: auto; top: 20px; left: auto; right: 20px; } }
@media (max-width: 560px) { .slider .pill { top: 12px; right: 12px; } }
/* the globe slide has its own dark background; the photo gradient would only dim its prompt */
.slide.globe-bg::after { display: none; }

/* research: /research and /research/<slug> */
.post-head { padding-top: 64px; max-width: 768px; }
.post-head h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; }
.post-meta { color: var(--ink-3); font-size: 15px; margin-top: 18px; }
.post-cover { margin: 40px auto 8px; }
.post-cover img { width: 100%; height: auto; border-radius: 14px; background: var(--line); }
.post-cover figcaption, .prose figcaption { color: var(--ink-3); font-size: 14px; margin-top: 10px; text-align: center; }
.prose { max-width: 720px; margin: 40px auto 0; font-size: 18px; line-height: 1.7; color: #1d2939; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: 28px; line-height: 1.2; margin-top: 1.9em; }
.prose h3 { font-size: 21px; line-height: 1.3; margin-top: 1.6em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { box-shadow: inset 0 -0.35em var(--hi); text-decoration: none; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose blockquote { margin-left: 0; margin-right: 0; padding-left: 20px; border-left: 3px solid var(--hi); font-size: 21px; color: var(--ink); }
.prose figure { margin: 2em 0; }
.prose img, .prose video { width: 100%; height: auto; border-radius: 10px; background: var(--line); }
.prose .table { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 600; border-bottom-color: var(--ink); }
.prose .num { text-align: right; font-variant-numeric: tabular-nums; }
.prose .embed { position: relative; aspect-ratio: 16 / 9; }
.prose .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
.prose .origin { margin-top: 3em; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-3); }
.more-research { border-top: 1px solid var(--line); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filters button { font: inherit; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 999px; border: 1px solid #d0d5dd; background: #fff; color: var(--ink); cursor: pointer; }
.filters button span { color: var(--ink-3); margin-left: 4px; }
.filters button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.filters button[aria-pressed="true"] span { color: #cfd4dc; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 24px; }
.card { text-decoration: none; display: flex; flex-direction: column; }
.card[hidden] { display: none; }
.card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; background: var(--line); margin-bottom: 14px; }
.card-topic { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.card strong { font-size: 20px; line-height: 1.25; font-weight: 600; margin-top: 6px; }
.card:hover strong span { box-shadow: inset 0 -0.35em var(--hi); }
.card-meta { font-size: 14px; color: var(--ink-3); margin-top: 8px; }
.card-desc { font-size: 15px; color: var(--ink-2); margin-top: 6px; }
.no-results { color: var(--ink-3); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } .prose { font-size: 17px; } .post-head { padding-top: 40px; } }
.card-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post { padding-bottom: 72px; }

/* the yellow highlight follows the text line by line when it wraps, instead of one band under
   the last line */
.hl, .link, .nav a, .prose a, .crumbs a, .card strong span, .vert h3 a, .vert dd a, .more strong,
.arc .name, .past li a, .foot ul a, .sec-head .eyebrow { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.prose caption { caption-side: top; text-align: left; font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 8px; }
.prose .table + .table { margin-top: 2em; }

/* products showcase (/newlanding7): .pshow > .pstick > (.arc tabs + .ppanels).
   Desktop: one panel at a time, stacked in the same grid cell so the section keeps the tallest
   panel's height; the active step's line fills (--p, set each frame by the page script).
   Phones: .pstick is pinned below the header while .pshow scrolls past; JS picks the product. */
.pshow .arc { margin: 0 0 8px; }
.pshow .arc a { cursor: pointer; transition: opacity .3s; }
.pshow .arc a:not(.is-on) { opacity: .5; }
@media (hover: hover) { .pshow .arc a:not(.is-on):hover { opacity: .8; } }
.pshow .arc a.is-on .name { box-shadow: inset 0 -0.35em var(--hi); display: inline; }
.pshow .arc a::after { content: ""; position: absolute; top: -2px; left: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--c); transition: width .1s linear; }
.pshow .ppanels { display: grid; }
/* one product at a time in the same spot: every product has the same layout (image left) and a plain
   cross-fade, the outgoing one fading out faster (.25s) than the incoming one fades in (.5s) */
.pshow .product { grid-area: 1 / 1; border-top: 0; padding: 40px 0 8px; opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s; }
.pshow .product:nth-of-type(even) .media { order: 0; }
.pshow .product.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
@media (prefers-reduced-motion: reduce) { .pshow .product, .pshow .product.is-on { transition: none; } }
@media (max-width: 720px) {
  .pshow { height: calc(100vh + 150vh); height: calc(100svh + 150svh); }
  .pshow .pstick { position: sticky; top: 68px; height: calc(100vh - 68px); height: calc(100svh - 68px);
    display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; padding-top: 28px; }
  .pshow .arc a { padding: 0 0 8px 22px; }
  .pshow .arc .q { font-size: 14px; margin-top: 2px; }
  .pshow .arc a:not(.is-on) .q { display: none; }   /* phones: the open product's question only */
  .pshow .arc .name { font-size: 19px; margin-top: 2px; }
  .pshow .arc .step { font-size: 12px; }
  .pshow .arc a::after { display: none; }
  /* the summarised card: image, pitch, "For", buttons */
  .pshow .product { padding: 0; gap: 12px; transform: none; align-content: start; }
  .pshow .product .tag, .pshow .product h3, .pshow .product .body, .pshow .facts li:not(:first-child) { display: none; }
  .pshow .media { aspect-ratio: 16 / 10; }
  .pshow .product .ctas { gap: 8px 14px; }
  .pshow .product .ctas .btn { padding: 10px 14px; font-size: 14px; }
  .pshow .product .pitch { font-size: 18px; margin: 0; }
  .pshow .facts { margin: 10px 0 14px; }
  .pshow .facts li { grid-template-columns: 1fr; gap: 2px; font-size: 14px; }
  /* too short to pin (.flat, set by the page script): every summarised card, stacked */
  .pshow.flat { height: auto; }
  .pshow.flat .pstick { position: static; height: auto; display: block; }
  .pshow.flat .arc { display: none; }
  .pshow.flat .ppanels { display: grid; gap: 40px; }
  .pshow.flat .product { grid-area: auto; opacity: 1; visibility: visible; }
}
/* /newlanding8: the showcase is pinned on desktop too (.pin-all); the page script picks the
   product from the scroll position. .flat (set when the pinned view does not fit) unpins it. */
@media (min-width: 721px) {
  .pshow.pin-all { height: calc(100vh + 150vh); }
  .pshow.pin-all .pstick { position: sticky; top: 68px; height: calc(100vh - 68px);
    display: flex; flex-direction: column; justify-content: flex-start; padding-top: 16px; }
  .pshow.pin-all.flat { height: auto; }
  .pshow.pin-all.flat .pstick { position: static; height: auto; display: block; }
}

/* the pinned area gets the page's own background: content is top-aligned (a fixed gap under the
   section intro, whatever the window height), and Safari, which tints its toolbar from elements
   pinned against the screen edge, sees white instead of the dark card inside */
.pshow .pstick { background: #fff; }
/* /newlanding8: the pinned area has 16px of air under the header; the intro above gives up the same
   16px so the gap from the intro to the timeline stays as it was. */
#products:has(.pshow.pin-all) .sec-head { margin-bottom: 40px; }

/* desktop, when it fits (.head-in, set by the page script): the PRODUCTS heading is pinned with the
   timeline: twice the earlier space around the timeline, step questions shown */
@media (min-width: 721px) {
  #products .pshow.head-in .sec-head { margin-bottom: 40px; }
  #products .pshow.head-in .product { padding-top: 26px; }
  #products .pshow.head-in .pstick { padding-top: 6px; }
  #products .pshow.head-in .facts { margin: 10px 0 14px; }
  #products .pshow.head-in .product h3 { margin-top: 0; }
  #products:has(.pshow.head-in) { scroll-margin-top: 44px; }   /* "Products" in the menu lands where the pin starts */
}
/* phones and tablets: fade in from white. Their browser bars are see-through and show the page
   behind, so a black fade turns them black until it ends (Safari). Desktop keeps the black fade. */
@media (hover: none) and (pointer: coarse) { .curtain { background: #fff; } }

/* /newlanding8 */
.hero.up { padding-top: 60px; }
@media (max-width: 560px) { .hero.up { padding-top: 36px; } }
/* the pinned area takes its content's height (the page script sizes the section around it) */
.pshow.pin-all .pstick { height: auto !important; }
/* visually hidden, still read by screen readers and search engines */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 720px) { .pshow.pin-all .pstick { gap: 24px; } }

/* /newlanding8, phones: the pinned one-at-a-time cross-fade (the base .pshow phone rules), with the
   open step's question in a fixed two-line slot so switching products never resizes the timeline.
   .spy (phones too short for that): the timeline pinned under the header and the cards scrolling
   beneath it; its line is drawn as a background so the white band behind it covers the cards. */
@media (max-width: 720px) {
  .pshow.pin-all .arc .q { min-height: 3.1em; }
  .pshow.pin-all.spy { height: auto !important; }
  .pshow.pin-all.spy .pstick { position: static; height: auto !important; display: block; padding-top: 0; background: none; }
  .pshow.pin-all.spy .arc { position: sticky; top: 92px; z-index: 5; margin: 0; border-left: 0; padding: 0 0 12px 6px;
    background: linear-gradient(var(--ink), var(--ink)) 5px 0 / 1px calc(100% - 12px) no-repeat, #fff; box-shadow: 0 -24px 0 #fff; }
  .pshow.pin-all.spy .ppanels { display: grid; gap: 40px; margin-top: 16px; }
  .pshow.pin-all.spy .product { grid-area: auto; opacity: .3; visibility: visible; transform: none; transition: opacity .5s ease; }
  .pshow.pin-all.spy .product.is-on { opacity: 1; }
}
/* phones, pinned cross-fade: tighter spacing, and the "For" row compact ("FOR" inline before its
   text) so the card fits an iPhone with Safari's bars collapsed */
@media (max-width: 720px) {
  .pshow.pin-all:not(.spy) .pstick { padding-top: 16px; gap: 14px; }
  .pshow.pin-all:not(.spy) .arc a { padding-bottom: 4px; }
  .pshow.pin-all:not(.spy) .facts { margin: 8px 0 12px; }
  .pshow.pin-all:not(.spy) .facts li:first-child { display: block; padding-top: 8px; }
  .pshow.pin-all:not(.spy) .facts b { display: inline; margin-right: 8px; padding-top: 0; }
}
/* desktop, pinned: the text column fills the card's height with the buttons at its foot, so the
   heading and buttons sit at the same height on every product and the cross-fade shows no shift
   (centred, Parcely's shorter text sat 11px lower) */
@media (min-width: 721px) {
  .pshow.pin-all:not(.flat) .product { align-items: stretch; }
  .pshow.pin-all:not(.flat) .product > div { display: flex; flex-direction: column; }
  .pshow.pin-all:not(.flat) .product .ctas { margin-top: auto; }
}
/* no grey/dark flash on the timeline steps when tapped (iOS/Android tap highlight) */
.pshow .arc a { -webkit-tap-highlight-color: transparent; }
/* desktop: a highlighted step title turns inline (for the marker) and the step gets 4px shorter;
   when two two-line steps were highlighted at once (moving between FloodLink and Parcely) the
   timeline shrank and the card under it jumped 4px. The extra bottom padding keeps every step the
   same height; the title still makes its small move. */
@media (min-width: 721px) {
  .pshow .arc a.is-on { padding-bottom: 8px; }
}
@media (min-width: 721px) and (hover: hover) { .pshow .arc a:hover { padding-bottom: 8px; } }
/* phones, pinned cross-fade: the buttons sit at the foot of every card. Hidden cards must stay
   visibility:hidden: at opacity 0 alone, iPhone Safari may draw a video through. Never stretch
   .media: Safari then drops its aspect-ratio and the box collapses (images vanished). */
@media (max-width: 720px) {
  .pshow.pin-all:not(.spy):not(.flat) .product { grid-template-rows: auto 1fr; }
  /* only the text column stretches: a stretched .media loses its aspect-ratio in Safari and
     collapses (the globe and the FloodLink photo vanished; the video kept its own height) */
  .pshow.pin-all:not(.spy):not(.flat) .product > div { display: flex; flex-direction: column; align-self: stretch; }
  .pshow.pin-all:not(.spy):not(.flat) .product .ctas { margin-top: auto; }
}
/* phones, pinned: the image and the text fade separately. Fading whole cards (as on desktop) let
   the white page flash through the image half-way. The image: the new one (on top) fades in over
   .5s while the old one stays solid underneath, then hides. The text and buttons the same way:
   the new column (white) fades in over .5s on top of the old one, which stays solid until covered.
   Fading both out and in (as on desktop) left two half-transparent dark buttons that read as one
   washed-out grey button, seen in Gabriel's iPhone screen recording. Hidden cards still end up
   visibility:hidden (needed on iOS for the video), and .media is never stretched. */
@media (max-width: 720px) {
  .pshow.pin-all:not(.spy):not(.flat) .product { opacity: 1; z-index: 1; transition: visibility 0s linear .5s; }
  .pshow.pin-all:not(.spy):not(.flat) .product.is-on { z-index: 2; transition: none; }
  .pshow.pin-all:not(.spy):not(.flat) .product .media { opacity: 0; transition: opacity 0s linear .5s; }
  .pshow.pin-all:not(.spy):not(.flat) .product.is-on .media { opacity: 1; transition: opacity .5s ease; }
  .pshow.pin-all:not(.spy):not(.flat) .product > div { background: #fff; opacity: 0; transition: opacity 0s linear .5s; }
  .pshow.pin-all:not(.spy):not(.flat) .product.is-on > div { opacity: 1; transition: opacity .5s ease; }
  /* the dark buttons share one width (the widest, "Open the live map"), so during the fade the dark
     box stays put and only its label changes, and the links beside them start at the same place.
     With different widths, two half-transparent dark boxes overlapped into a grey box with a slab
     sticking out (seen in Gabriel's iPhone screen recording). */
  .pshow.pin-all:not(.spy):not(.flat) .product .ctas .btn { min-width: 152px; justify-content: center; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .pshow.pin-all .product, .pshow.pin-all .product.is-on, .pshow.pin-all .product > div, .pshow.pin-all .product.is-on > div,
  .pshow.pin-all .product .media, .pshow.pin-all .product.is-on .media { transition: none; }
}
/* /newlanding9 and /newlanding10: the Network pillar (LAIA Ventures). Cards reuse the Lab's .vert;
   below them the forums line and the partner logos (moved in from the old partners strip). */
.network .net-forums { margin: 28px auto 32px; max-width: 760px; text-align: center; color: var(--ink-3); font-size: 14px; }
@media (max-width: 560px) { .network .net-forums { text-align: left; margin: 22px 0 24px; } }
/* /newlanding11: the forums line and logos close the section, so they get room above them */
.net-grid + .net-forums { margin-top: 88px; }
@media (max-width: 860px) { .net-grid + .net-forums { margin-top: 56px; } }
/* /newlanding11: Network around the Observatory. Services on the left, the map loop (the hero of the
   section) on the right; on narrow screens the map comes first. */
.net-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.net-services .svc { padding: 18px 0 20px; border-top: 1px solid var(--line); }
.net-services .svc:first-child { border-top: 0; padding-top: 0; }
.net-services .svc h3 { font-size: 21px; }
.net-services .svc p { color: var(--ink-2); font-size: 15px; margin: 6px 0 10px; }
.net-services .svc .link { font-size: 15px; }
.net-services .svc:last-child { padding-bottom: 0; }
.net-side .ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 20px; margin-top: 8px; }   /* centred under the globe beside the services */
.net-map { display: block; position: relative; aspect-ratio: 4 / 3; }
.net-map img, .net-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.net-map canvas { opacity: 0; transition: opacity .3s; }
.net-map.live canvas { opacity: 1; }   /* the scroll-driven globe takes over from the still image once drawn */
@media (max-width: 860px) { .net-grid { grid-template-columns: 1fr; gap: 28px; } .net-side { order: -1; } .net-side .ctas { justify-content: flex-start; } }   /* stacked: globe, buttons (left-aligned), then the services */
/* /newlanding11: footer with five columns (Products, Advisory, Network, Company, Social) */
.foot.five { grid-template-columns: 1.4fr repeat(5, 1fr); gap: 28px; }
@media (max-width: 900px) { .foot.five { grid-template-columns: 1fr 1fr; } }
/* /newlanding11: each hero slide has one tag, "PRODUCT · FOOTING →", the whole tag a link in the
   tag's own style (the white button per slide competed with the hero's two main buttons) */
a.kind { text-decoration: none; transition: background .15s; }
a.kind b { font-weight: 600; }
a.kind::after { content: " →"; }
a.kind:hover { background: rgba(16,24,40,.92); }
a.kind:hover b { text-decoration: underline; text-underline-offset: 3px; }
/* desktop (wider than 720px; phones untouched), pinned products: the image cross-fades without the
   white page flashing through. The cards no longer fade as a whole: the new image (on top) fades
   in over .5s while the old one stays solid underneath, then hides. The text keeps the desktop
   fade: old out in .25s, new in over .5s. */
@media (min-width: 721px) {
  .pshow.pin-all .product { opacity: 1; z-index: 1; transition: visibility 0s linear .5s; }
  .pshow.pin-all .product.is-on { z-index: 2; transition: none; }
  .pshow.pin-all .product .media { opacity: 0; transition: opacity 0s linear .5s; }
  .pshow.pin-all .product.is-on .media { opacity: 1; transition: opacity .5s ease; }
  .pshow.pin-all .product > div { opacity: 0; transition: opacity .25s ease; }
  .pshow.pin-all .product.is-on > div { opacity: 1; transition: opacity .5s ease; }
}
@media (min-width: 721px) and (prefers-reduced-motion: reduce) {
  .pshow.pin-all .product, .pshow.pin-all .product .media, .pshow.pin-all .product > div { transition: none !important; }
}
/* /newlanding12: "From the research", three cards from the research index style */
.research-strip { border-top: 1px solid var(--line); }
.research-strip .strip-more { margin-top: 28px; }
@media (max-width: 900px) { .research-strip .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {   /* phones: compact rows like the Lab cards, image left, no description */
  .research-strip .cards { grid-template-columns: 1fr; gap: 0; }
  .research-strip .card { display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
  .research-strip .card img { grid-row: 1 / 3; width: 84px; height: 84px; aspect-ratio: auto; margin: 0; border-radius: 6px; }
  .research-strip .card strong { font-size: 17px; margin-top: 2px; }
  .research-strip .card-desc { display: none; }
}

/* /newcontact: the contact page in the new design */
.contact-page { padding-top: 72px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.contact-intro h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; margin: 0 0 16px; }
.contact-direct { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }
.contact-direct p { color: var(--ink-3); font-size: 15px; width: 100%; margin: 0 0 4px; }
.cform { display: grid; gap: 18px; }
.cform .field { display: grid; gap: 6px; }
.cform label { font-size: 14px; font-weight: 500; }
.cform label span { color: var(--ink-3); font-weight: 400; }
.cform input:not([type=checkbox]), .cform select, .cform textarea { font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff; color: var(--ink); width: 100%; }
.cform textarea { resize: vertical; min-height: 140px; }
.cform input:focus, .cform select:focus, .cform textarea:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.cform .check { display: flex; gap: 10px; align-items: center; font-weight: 400; color: var(--ink-2); }
.cform .check input { width: 18px; height: 18px; accent-color: var(--ink); }
.cform .btn { justify-self: start; }
.cform-error { color: #b42318; font-size: 15px; }
.cform-done { padding: 28px; border: 1px solid var(--line); border-radius: 14px; }
.cform-done h2 { font-size: 28px; margin-bottom: 8px; }
.cform-done p { color: var(--ink-2); margin-bottom: 16px; }
@media (max-width: 860px) { .contact-page { padding-top: 40px; } .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.cform select { -webkit-appearance: none; appearance: none; padding-right: 36px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23101828' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; }
/* /contact: the thank-you note sits right under the Send button */
p.cform-done { padding: 0; border: 0; color: var(--ink-2); font-size: 15px; }
p.cform-done strong { color: var(--ink); }
/* /newlanding12: no rule above the Research strip, and less room after the partner logos, whose
   boxes already carry white space, so this gap reads like the others */
.research-strip { border-top: 0; }
.network:has(+ .research-strip) { padding-bottom: 40px; }
/* the hero's highlighted words fill on hover, as on the old laia.org (.hover-highlight: .8s, same curve) */
.hero h1 .hl { transition: box-shadow .8s cubic-bezier(.075, .82, .165, 1); }
@media (hover: hover) { .hero h1 .hl:hover { box-shadow: inset 0 -1.1em var(--hi); } }
/* /contact: its label carries the same yellow mark as the section labels */
.contact-intro .eyebrow { display: inline-block; color: var(--ink); font-weight: 600; font-size: 14px; letter-spacing: .1em; padding: 0 3px; box-shadow: inset 0 -0.55em var(--hi); margin-bottom: 18px; }
/* a page's own label with the yellow mark of the homepage's section labels (/research) */
.eyebrow.mark { display: inline-block; color: var(--ink); font-weight: 600; font-size: 14px; letter-spacing: .1em; padding: 0 3px; box-shadow: inset 0 -0.55em var(--hi); margin-bottom: 18px; }