/* Shared geometry, 2026-11-02.
   Brand assets, editorial copy and film presets remain independent. */
:root { --maxw: 1600px; --gutter: 24px; --header-h: 68px; }
.site-header { position: fixed; inset: 0 0 auto; width: 100%; }
main { padding-top: 16px; }
.nav { height: var(--header-h); gap: 22px; }
.nav-menu { gap: 8px; }
.nav-trigger, .nav-link { height: 37px; padding: 8px 14px; gap: 6px; }
.caret { width: 14px; height: 14px; }
.nav-cta { gap: 8px; }
.nav-cta .btn { height: 38px; padding: 0 16px; }
/* Header "Get in touch" stays black, as the user asked. */
.nav-cta a[href="contact.html"], .m-cta a[href="contact.html"] { background: #000; border-color: #000; color: #fff; font-weight: 500; }
.nav-cta a[href="contact.html"]:hover, .m-cta a[href="contact.html"]:hover { background: #222; border-color: #222; }
.btn { border-radius: 6px; }
.btn-lg { height: 44px; padding: 0 20px; }
.section { padding: 80px 0; }
.section-sm { padding: 64px 0; }
.eyebrow { margin-bottom: 40px; }
.section-head { max-width: 896px; margin-bottom: 56px; }
.section-head .lead { max-width: 768px; margin-top: 24px; }

/* Home: the header floats above the hero, so it contributes no extra row. */
.hero { padding: 112px 0 64px; }
.hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 48px; min-height: 0; }
.hero h1 { max-width: 750px; margin: 0; }
.hero-links { width: 100%; flex-shrink: 0; }
.hero-links a, .hero-links a:last-child { padding: 16px 0; }
.hero-links a:first-child { padding-top: 0; }
.hero-links .hl-title { font-size: 20px; line-height: 28px; gap: 8px; }
.hero-links .hl-desc { display: none; }
.hero-links .soon-badge { align-self: center; }

/* Landscape footage on every screen. Details move below it on mobile. */
.film { --film-height: min(56.25vw, 100svh); height: var(--film-height); min-height: 0; max-height: none; }
.film-inner { min-height: 0; gap: 0; padding-top: 80px; padding-bottom: 56px; }
.film-stats { gap: 32px; }
.requests { width: 344px; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.film[data-film-preset] .requests { background: transparent; }
.requests-head { margin-bottom: 12px; }
.req { padding: 16px 0; gap: 4px 12px; }
.req-title { white-space: normal; }
.requests .btn { margin-top: 16px; height: 40px; }
.requests .btn-light { height: 38px; font-size: 14px; font-weight: 400; color: #fff; background: rgb(255 255 255 / .2); border: 1px solid rgb(255 255 255 / .4); }
.requests .btn-light:hover { background: rgb(255 255 255 / .3); }

.bench-list { gap: 24px; }
.bench { border-radius: 12px; grid-template-columns: 1fr; min-height: 0; }
.bench-side, .bench-main, .bench-rows { padding: 24px; }
.bench-main { border-right: 0; border-top: 1px solid var(--line); gap: 32px; }
.bench-main p { margin-top: 14px; }
.bench-rows { grid-column: auto; border-top: 1px solid var(--line); }
.brow { padding: 14px 0; }
.offer-grid { grid-template-columns: 1fr; gap: 64px 0; }
.offer { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.offer .iso { width: 156px; height: 120px; object-fit: contain; margin-bottom: 24px; }
.offer > .soon-badge { position: absolute; top: 0; right: 0; margin: 0; }
.offer ul { margin: 24px 0 32px; gap: 16px; }
.offer li { font-size: 14px; line-height: 24px; }
.offer > .btn { margin-top: auto; }
body[data-page="home"] .section.soft { background: linear-gradient(180deg, #f9fafb, #fff 39.16%); padding: 96px 0; }
body[data-page="home"] #data-focus { padding-top: 0; }
.post-grid { gap: 24px; }
.feature-post { border-radius: 12px; }
.feature-body { padding: 32px 24px; }
.signal-grid { gap: 24px; }
.card, .buy-card, .rights-card, .step, .product { border-radius: 12px; padding: 24px; }
.buy-grid, .grid-3, .product-grid, .steps, .rights-grid, .grid-2 { gap: 24px; }
.faq-wrap { gap: 48px; }
.faq summary { padding: 24px 0; }

/* Subpages share the same gutter and heading/body/action rhythm. */
.page-hero, .page-hero.tall { min-height: 0; padding: 128px 0 112px; }
.page-hero .lead { max-width: 720px; margin-top: 24px; }
.page-hero .btn-row { margin-top: 32px; }
.page-hero .eyebrow-pill { margin-bottom: 24px; }
body[data-page="experts"] main { padding-top: 0; }
.page-hero.dark-hero { margin-top: 0; padding: 128px 0 64px; min-height: 90svh; }
.xp-hero-grid { gap: 48px; }
.xp-hero-grid > div:first-child { max-width: 512px; }
.xp-hero-grid h1 { max-width: 512px; }
.xp-hero-grid .lead { margin-top: 16px; }
.xp-hero-grid .soon-badge { margin-bottom: 16px; }
.mission-hero { padding: 128px 0 80px; }
.blog-hero { padding: 128px 0 56px; }
.contact-wrap { padding-top: 112px; }
.portal { padding-top: 112px; }
.post-head, .legal-head { padding-top: 112px; }
.video-options.container { padding-top: 112px; }
body[data-page="research"] .page-hero { min-height: 0; padding: 112px 0 0; text-align: center; }
body[data-page="research"] .page-hero h1 { margin-inline: auto; }
body[data-page="research"] .page-hero .lead { margin-inline: auto; max-width: 768px; }
body[data-page="research"] .page-hero .btn-row { justify-content: center; }
body[data-page="research"] .page-hero .hero-art { display: none; }
body[data-page="research"] #packs { padding-top: 128px; }
.site-footer { padding: 0 0 48px; margin: 64px auto 0; border: 0; max-width: var(--maxw); }
.site-footer > .container { width: calc(100% - 2 * var(--gutter)); padding: clamp(40px, 4vw, 64px) 0 0; border-top: 0; }
.foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.foot-col { min-width: 0; }
.foot-col h2 { color: #000; font-weight: 500; margin: 2px 0 8px; }
.foot-links { display: flex; flex-direction: column; gap: 4px; }
.foot-col a { padding: 0; color: #4b5563; transition: color .1s; overflow-wrap: break-word; }
.foot-col a:hover { color: #9ca3af; }
.foot-col a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.foot-bottom { gap: 16px; }
/* Reference rhythm: 84px from the tallest link column to the legal row, 69px to the location line. */
.foot-bottom { margin-top: 84px; }
.foot-meta { margin-top: 49px; }

@media (min-width: 640px) {
  .hero-links .hl-desc { display: block; }
  .bench-side, .bench-main, .bench-rows { padding: 40px; }
  .page-hero, .page-hero.tall { padding: 144px 0; }
}
@media (min-width: 768px) {
  :root { --gutter: 32px; }
  .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .hero { padding: 128px 0 80px; }
  .hero-grid { gap: 80px; }
  .hero-links a, .hero-links a:last-child { padding: 24px 0; }
  .hero-links a:first-child { padding-top: 0; }
  .hero-links .hl-title { font-size: 24px; line-height: 32px; }
  .eyebrow { margin-bottom: 64px; }
  .bench-side, .bench-main, .bench-rows { padding: 32px 48px; }
  .offer .iso { height: 147px; }
  .page-hero, .page-hero.tall { min-height: 90vh; padding: 176px 0; display: flex; align-items: center; }
  body[data-template="sell-data"] .page-hero { padding: 192px 0; }
  .card, .buy-card, .rights-card, .step, .product { padding: 32px; }
  .feature-body { padding: 48px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 56px; }
  .hero { padding-bottom: 56px; }
  .hero-grid { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .hero h1 { min-width: 0; flex: 1; padding-bottom: 24px; }
  .hero-links { width: 320px; }
  body[data-page="home"] #data-focus { padding-top: 80px; }
  body[data-page="home"] #data-focus .eyebrow { margin-bottom: 96px; }
  .bench { grid-template-columns: 27% 39.4% 33.6%; min-height: 363px; }
  .bench-side, .bench-main, .bench-rows { padding: 32px; }
  .bench-main { border-top: 0; border-right: 1px solid var(--line); }
  .bench-rows { border-top: 0; }
  .offer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .offer { min-height: 500px; }
  .offer:not(:first-child) { padding-left: 48px; border-left: 1px solid var(--line); }
  .offer:not(:last-child) { padding-right: 48px; }
  .offer:not(:last-child) > .soon-badge { right: 48px; }
  .page-hero.dark-hero { padding: 128px 0 80px; }
  .xp-hero-grid { grid-template-columns: minmax(0,512px) auto; justify-content: space-between; }
  .faq-wrap { gap: 80px; }
}
@media (min-width: 1110px) { .hero-links { width: 420px; padding-left: 50px; } }
@media (min-width: 1140px) { .hero-links { width: 440px; } }
@media (min-width: 1280px) { .bench-side, .bench-main { padding: 48px; } }
@media (min-width: 1440px) { .hero-links { width: 520px; } }

@media (max-width: 1023px) {
  .nav-menu, .nav-cta { display: none; }
  .nav-toggle { display: grid; }
  .mobile-menu { display: block; position: fixed; inset: var(--header-h) 0 0; z-index: 49; padding: 12px var(--gutter) 40px; background: #fff; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); }
  body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; }
  body.menu-open { overflow: hidden; }
  .film { display: grid; grid-template-columns: 1fr; grid-template-rows: var(--film-height) auto auto; height: auto; background: #fff; color: var(--ink); }
  .film > .film-media { bottom: auto; height: var(--film-height); }
  .film-inner, .film-bottom { display: contents; }
  .film-top { grid-row: 1; grid-column: 1; align-self: start; margin: 0 var(--gutter); padding-top: 32px; color: #fff; }
  .film .film-stats { grid-row: 2; grid-column: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 var(--gutter); padding: 24px 0; text-shadow: none; }
  .film .stat-label { color: var(--muted); }
  .film .requests { grid-row: 3; grid-column: 1; width: auto; margin: 40px var(--gutter) 80px; color: var(--ink); }
  .film .requests-head, .film .film-credit, .film .req-range, .film .req-meta { color: var(--muted); }
  .film .req { border-color: var(--line); }
  .film .dots button { background: var(--line-2); }
  .film .dots button.on { background: var(--ink); }
  .film .requests .btn { border-color: var(--line-2); }
  .film-media video, .film-poster { object-position: center; }
  .xp-hero-grid { grid-template-columns: 1fr; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .film { grid-template-rows: var(--film-height) auto; }
  .film-top { padding-top: 48px; }
  .film .film-stats { grid-row: 1; align-self: end; padding: 0 0 32px; color: #fff; text-shadow: 0 0 20px rgb(0 0 0 / .3); }
  .film .stat-label { color: rgba(255,255,255,.8); }
  .film .requests { grid-row: 2; margin-top: 56px; }
}
@media (max-width: 480px) {
  .xp-hero-grid h1 { font-size: 30px; line-height: 30px; }
  .hero-line { white-space: nowrap; }
  .foot-bottom { margin-top: 48px; }
  body[data-page="research"] #packs { padding-top: 80px; }
}
/* Keep the accepted three lines inside the gutter on narrow phones. */
@media (max-width: 389px) { .hero h1 { font-size: min(36px, 10.8cqw); } }

/* Data lists use the full row after removing the status column. */
#data-focus .brow { grid-template-columns: 22px 1fr; }

/* Footer foot, as in the reference: a hairline between the legal row and the location row,
   a location arrow in grey-400, the privacy-choices toggle, and the brand in the fourth column. */
.foot-bottom .privacy-choices{display:inline-flex;align-items:center;gap:4px}
.foot-bottom .privacy-choices svg{flex:none;width:28px;height:16px}
.foot-meta{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:center}
.foot-meta .loc{grid-column:1;gap:2px;color:#9ca3af}
.foot-meta .loc::before{display:none}
.foot-meta .loc svg{flex:none;width:16px;height:16px}
.foot-meta .foot-brand{grid-column:4;justify-self:start}
@media(min-width:768px){.foot-meta::before{content:"";position:absolute;inset:-25px 0 auto;border-top:1px solid #f3f4f6}}
@media(max-width:767px){.foot-meta{grid-template-columns:1fr;gap:12px}.foot-meta .foot-brand{grid-column:1}}

/* Home, measured against the reference: the roles button sits compact at the panel's right, the
   film's backdrop is the reference's warm black, and the journal and press rows run at full size
   (a 420px featured card, 24/32 card titles, square press tiles with 16/24 titles). */
.film{background:#171310}
.requests .btn{display:flex;width:fit-content;margin:24px 0 0 auto;padding:0 16px}
body[data-page=home] .feature-post{min-height:420px;border:0;border-radius:8px}
body[data-page=home] .feature-art{min-height:420px;border-radius:8px 0 0 8px}
body[data-page=home] .feature-body{padding:32px;border:1px solid #e5e7eb;border-left:0;border-radius:0 8px 8px 0;transition:border-color .2s}
body[data-page=home] .feature-post:hover .feature-body{border-color:#d1d5db}
body[data-page=home] .feature-body .post-date{color:#020817;font-size:14px;line-height:20px}
body[data-page=home] .feature-body h3{margin-top:16px;padding-right:32px;font-size:48px;line-height:48px;letter-spacing:-1.2px}
body[data-page=home] .feature-body p{max-width:none;margin-top:16px;color:#020817;font-size:18px;line-height:28px}
body[data-page=home] .feature-body .post-cat{margin-top:auto;padding-top:24px;color:#6b7280;font-size:14px;line-height:20px}
body[data-page=home] .post-grid{gap:24px;margin-top:24px}
body[data-page=home] .post-card{min-height:252px;padding:24px;border-color:#e5e7eb;border-radius:6px}
body[data-page=home] .post-card .post-date{color:#4b5563;font-size:14px;line-height:20px}
body[data-page=home] .post-card h4{margin-top:16px;color:#020817;font-size:24px;line-height:32px;letter-spacing:0}
body[data-page=home] .post-card .post-cat{margin-top:auto;padding-top:16px;color:#4b5563;font-size:14px;line-height:20px}
body[data-page=home] .signal-tile{aspect-ratio:1;border:1px solid #f3f4f6;border-radius:8px;background:#f9fafb}
body[data-page=home] .signal h4{margin-top:16px;font-size:16px;line-height:24px;font-weight:500;letter-spacing:0}
body[data-page=home] .signal .src{margin-top:4px;font-size:12px;line-height:16px}
@media(max-width:1023px){body[data-page=home] .feature-art{min-height:260px;border-radius:8px 8px 0 0}body[data-page=home] .feature-body{border-left:1px solid #e5e7eb;border-top:0;border-radius:0 0 8px 8px}body[data-page=home] .feature-body h3{font-size:36px;line-height:40px}}
@media(max-width:1023px){.requests .btn{margin-left:0}}
body[data-page=home] .feature-body h3,body[data-template=blog] .feature-body h2{text-wrap:balance}
@media(max-width:639px){body[data-page=home] .feature-body h3{padding-right:0}}
/* Benchmark cards as in the reference: the coloured side runs the full height unbordered, the
   rest of the card carries the border with a gray-100 divider, and the actions are 32px pills, the
   first in the side's own colour. */
@media (min-width: 1024px) {
  .bench { border: 0; overflow: visible; }
  .bench-side { border-radius: 12px 0 0 12px; }
  .bench-main { border: 1px solid #e5e7eb; border-width: 1px 1px 1px 0; border-right-color: #f3f4f6; }
  .bench-rows { border: 1px solid #e5e7eb; border-left: 0; border-radius: 0 12px 12px 0; }
}
.bench-main h4 { color: #000; }
.bench .chip { height: 32px; padding: 0 16px; border: 0; border-radius: 6px; background: #f3f4f6; color: #000; }
.bench .chip:hover { background: #e5e7eb; }
.bench .chip-dark { background: var(--forest); color: #fff; }
.bench .chip-dark:hover { background: var(--pine); }
.bench:has(.tone-lime) .chip-dark { background: var(--lime); color: var(--forest); }
.bench:has(.tone-lime) .chip-dark:hover { background: #c4ea66; }
.bench:has(.tone-teal) .chip-dark { background: #0e7f73; }
.bench:has(.tone-teal) .chip-dark:hover { background: #0b6b61; }
/* Home offers as in the reference: 24/32 gray-900 titles with a 20px gray-300 chevron, gray-600
   items behind 6px gray-200 square bullets 12px apart, gray-100 dividers, columns as tall as their
   content, and 14/20 regular buttons padded 8/24 (36px, or 38 with the outline). */
.offer h3 { line-height: 32px; color: #111827; }
.offer h3 svg { width: 20px; height: 20px; color: #d1d5db; transform: translateX(-4px) scale(.95); transition: transform .2s; }
.offer:hover h3 svg { transform: none; }
.offer ul { margin: 20px 0 32px; gap: 12px; }
.offer li { color: #4b5563; }
.offer li::before { top: 9px; width: 6px; height: 6px; border-radius: 2px; background: #e5e7eb; }
.offer > .btn { height: auto; padding: 8px 24px; font-size: 14px; line-height: 20px; font-weight: 400; border-radius: 6px; }
.offer > .btn-primary { border: 0; }
.offer > .btn-brand-outline { border: 1px solid var(--brand-600); background: transparent; color: var(--brand-600); }
.offer > .btn-brand-outline:hover { background: var(--brand-50); }
@media (min-width: 1024px) {
  .offer { min-height: 0; }
  .offer:not(:first-child) { border-left-color: #f3f4f6; }
}
body[data-page=home] section:has(.offer-grid) .lead { color: #64748b; }
/* Home posts as in the reference: the feature starts 56px under the section padding, and its date
   sits in a 24px line like the reference's inline <time>. */
body[data-page=home] .feature-post { margin-top: 56px; }
body[data-page=home] .feature-body .post-date { line-height: 24px; }
/* Footer foot as in the reference: the legal row 88px under the link grid, a 20px meta row with
   the divider 25px above it, and the page's 16px bottom padding after the footer. */
@media (min-width: 481px) { .foot-bottom { margin-top: 88px; } }
@media (min-width: 768px) { .foot-meta { height: 20px; } }
.site-footer { margin-bottom: 16px; }
@media (min-width: 768px) { .foot-meta { align-items: start; } }
/* Home film panel as in the reference: stats 5px from number to label and 40px apart above a 76px
   foot; the roles list with an 8px-dot head, 68px rows (15/22.5 titles, 12/16 white-70 sub-lines,
   white-20 dividers) and a plain 14/20 link beneath. The project-areas note keeps the sub-line style. */
@media (min-width: 1024px) {
  .film-inner { padding-bottom: 76px; }
  .film .film-stats { gap: 40px; }
  .film .stat-label { margin-top: 5px; color: rgb(255 255 255 / .8); }
  .film .requests { margin-bottom: -2px; }
  .film .requests-head { margin-bottom: 12px; color: rgb(255 255 255 / .8); }
  .film .dots { gap: 8px; }
  .film .dots button { width: 8px; height: 8px; border-radius: 9999px; background: rgb(255 255 255 / .4); }
  .film .dots button.on { background: #fff; transform: none; }
  .film .film-credit { margin: -8px 0 4px; color: rgb(255 255 255 / .7); font-size: 12px; line-height: 16px; }
  .film .req { padding: 12px 0 13px; row-gap: 3.5px; border-bottom-color: rgb(255 255 255 / .2); }
  .film .req-title { font-size: 15px; line-height: 22.5px; }
  .film .req-meta { color: rgb(255 255 255 / .7); font-size: 12px; line-height: 16px; }
  .film .requests .btn { height: auto; margin: 23px 0 0 auto; padding: 0; border: 0; background: none; font-size: 14px; line-height: 20px; }
  .film .requests .btn:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
}
/* Home benchmark labels and small print on the reference's 12/16 and 14/20 lines. */
.bench-rows > span:first-child, .bench-rows .rows-head { font-size: 12px; line-height: 16px; }
.bench-src span { font-size: 12px; line-height: 16px; }
.bench-src strong { line-height: 28px; }
body[data-page=home] .fineprint { font-size: 12px; line-height: 16px; color: #6b7280; }

/* Home film label in the reference's white-80; benchmark card body without its own fill; the rows'
   head and source label on the reference's 12/16 gray and 20/28 title lines. */
body[data-page=home] .film-label { color: rgb(255 255 255 / .8); }
@media (min-width: 1024px) { .bench { background: none; } }
.bench-rows .brow-head span { color: #6b7280; font-size: 12px; line-height: 16px; }
.bench-src strong { font-weight: 400; line-height: 28px; letter-spacing: -.5px; }
/* Phone sizes as the reference sets them at 375 px: 20/28 film figures with 12/16 labels, 24/32
   benchmark titles, 36/45 feature titles below the large breakpoint. */
@media (max-width: 639px) {
  .film .stat-num { line-height: 28px; letter-spacing: 0; }
  .film .stat-label { font-size: 12px; line-height: 16px; }
  .bench-side h3 { line-height: 32px; }
}
@media (max-width: 1023px) { body[data-page=home] .feature-body h3 { font-size: 36px; line-height: 45px; letter-spacing: -.9px; } }
/* Header buttons and benchmark pills sized by padding as in the reference (8px / 6px around a 20px
   line), which gives the same 38px and 32px boxes. */
.nav-cta .btn { height: auto; padding: 8px 16px; }
.nav-cta .btn-ghost { padding: 8px 24px; }
.bench .chip { height: auto; padding: 6px 16px; }
/* Signal tiles' lettering on the reference's type scale: the figure style of its case-study tiles
   (36/40, -0.9px) and its 12/16 gray caption. */
.signal-big { font-size: 36px; line-height: 40px; font-weight: 400; letter-spacing: -.9px; color: #18181b; }
.signal-sub { font-family: var(--font); font-size: 12px; line-height: 16px; letter-spacing: 0; text-transform: none; color: #6b7280; }