/* Source: Hologen_Brand Guidelines V1_070226.pdf.
   Logo: pp. 4–7, 11, 16. Type: pp. 18–20. Colour: pp. 22–24.
   Large wordmark signatures: pp. 1, 30, 39, 46.
   The separate colour sheet repeats the same seven hex codes. */
@font-face{font-family:'Die Grotesk A';src:url('/fonts/DieGrotesk-A-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Die Grotesk A';src:url('/fonts/DieGrotesk-A-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Die Grotesk B';src:url('/fonts/DieGrotesk-B-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Die Grotesk B';src:url('/fonts/DieGrotesk-B-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Frame Head';src:url('/fonts/FrameHead-Roman.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--hg-midnight-blue:#050D2C;--hg-white:#FFFFFF;--hg-electric-blue:#1800F6;--hg-light-blue:#2FA8F9;--hg-lavender:#B0B0F1;--hg-light-lavender:#EAE8FF;--hg-coral:#F99D7F;--ink:var(--hg-midnight-blue);--paper:var(--hg-white);--lime:var(--hg-lavender);--coral:var(--hg-coral);--muted:var(--hg-lavender)}
body{font-family:'Die Grotesk A',Arial,sans-serif;font-synthesis:none}
h1{font-family:'Die Grotesk B',Arial,sans-serif;font-weight:400;letter-spacing:-.04em}
h2,h3{font-family:'Die Grotesk B',Arial,sans-serif;font-weight:500;letter-spacing:-.035em}
em{font-family:'Frame Head',Georgia,serif;font-weight:400;font-style:normal;letter-spacing:-.035em}
.hero-copy{padding-top:60px}.hero h1{font-size:clamp(68px,8.5vw,155px);line-height:.98}.hero-line{display:block;white-space:nowrap}
.eyebrow,.section-kicker,.hero-edition,.art-tag,.illustration-note,.footer-bottom,.scan-label,.detail-label,.field-caption p,.header-cta,.signal-description p{font-family:'Die Grotesk A',Arial,sans-serif}
button,.text-link,.hero-intro,.vision-text .large-copy,.belief-line,.signal-tabs,.signal-description h3,.contact-list h2,.team-card .role,.detail-bottom h2{font-family:'Die Grotesk B',Arial,sans-serif}
.hero-intro{font-weight:400}.hero-intro p{font-size:19px}.masthead nav{font-size:14px}
/* Page 6: mark height = 1.5 × cap height; visible gap = 0.5 × cap height.
   Original artwork has transparent margins; crop its box, never its paths.
   Mark bounds: x 227.9, y 245, width 624.2, height 590 on a 1080 square.
   Wordmark H cap: 151.84 on a 1002 × 160 viewBox, inset 2.74 at left. */
.brand{--cap:24px;display:inline-flex;align-items:center;gap:calc(var(--cap)*.481955);letter-spacing:0;flex-shrink:0;line-height:1}
.brand-mark-crop{display:block;position:relative;overflow:hidden;width:calc(var(--cap)*1.586949);height:calc(var(--cap)*1.5);flex-shrink:0}
.brand-mark-crop .brand-mark{position:absolute;display:block;width:calc(var(--cap)*2.745763);height:calc(var(--cap)*2.745763);max-width:none;left:calc(var(--cap)*-.579407);top:calc(var(--cap)*-.622881)}
.brand-wordmark{display:block;width:calc(var(--cap)*6.599052);height:auto;max-width:none}
.masthead{min-height:108px}.paper{background:var(--hg-light-lavender)}
/* Scientific leadership: a shared source branches into medical intelligence. */
.people-layout{grid-template-columns:.92fr 1.18fr;gap:4%;align-items:center;min-height:500px}
.people-layout>div:last-child{grid-column:1;grid-row:1}.people-art{grid-column:2;grid-row:1;justify-self:end;width:100%;height:auto;aspect-ratio:3/2;background:none;overflow:visible}

.people-layout .eyebrow{color:var(--hg-coral)}
.invitation{background:var(--hg-coral)}.invitation h2{font-family:'Die Grotesk B',Arial,sans-serif;font-weight:400;letter-spacing:-.045em}
.footer-top{padding-bottom:55px}.footer-top p{font-family:'Frame Head',Georgia,serif;font-style:normal}.footer-signature{display:block;width:100%;padding-bottom:24px}.footer-signature img{display:block;width:100%;height:auto}.footer-bottom{border-top:0;padding-top:0}.footer{padding-top:40px}
.team-card .initial{font-family:'Die Grotesk B',Arial,sans-serif;font-style:normal;font-weight:400}.detail-hero{position:relative}.detail-hero h1{font-family:'Die Grotesk B',Arial,sans-serif;font-weight:400;letter-spacing:-.04em}.detail-bottom{background:var(--hg-light-lavender)}
.detail-bottom .text-link{flex-shrink:0;white-space:nowrap}.signal-tabs button[aria-selected=true]{color:var(--hg-coral)}
/* Approved text pairings, p. 24. Use a visible brand colour for focus. */
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline-color:var(--hg-light-blue)}.paper a:focus-visible,.paper button:focus-visible,.detail-body a:focus-visible,.detail-body button:focus-visible,.invitation a:focus-visible,.detail-bottom a:focus-visible{outline-color:var(--hg-midnight-blue)}
@media(min-width:1700px){.hero-copy{padding-top:75px}.hero h1{font-size:155px}}
@media(max-width:1100px){.hero-copy{padding-top:80px}.hero-intro p{font-size:17px}}
@media(max-width:760px){.brand{--cap:20px}.masthead{height:88px;min-height:88px}.mobile-menu{top:88px}.hero-copy{padding-top:38px}.hero h1{font-size:clamp(42px,12.8vw,82px);line-height:1.02}.hero-intro p{font-size:15px}.hero-art{top:325px}.footer-top{padding-bottom:38px}.footer-signature{padding-bottom:22px}.vision h2{font-size:clamp(59px,12.5vw,85px)}.vision-text .large-copy{font-size:24px}.team-card .initial{font-size:76px}.invitation h2{font-size:clamp(80px,18vw,140px)}.hero{min-height:980px}.people-layout{display:flex;min-height:0;gap:35px}.people-layout>div:last-child{order:-1}.people-art{height:auto;max-height:none;max-width:100%}.people-layout h2{font-size:47px}}
@media(max-width:380px){.hero h1{font-size:clamp(40px,12.8vw,49px)}.hero{min-height:950px}}
/* Scientific foundations substantiate the individual-centred positioning. */
.trust-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #050D2C33;padding:30px 0 35px;gap:35px}.trust-strip>a{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-right:25px}.trust-strip>a+a{border-left:1px solid #050D2C33;padding-left:35px}.trust-value{font-family:'Die Grotesk B',Arial,sans-serif;font-size:clamp(24px,2.6vw,40px);font-weight:400;letter-spacing:-.035em;line-height:1.1}.trust-detail{font-family:'Die Grotesk A',Arial,sans-serif;font-size:14px;line-height:1.4;max-width:255px}.trust-link{font-family:'Die Grotesk A',Arial,sans-serif;font-size:11px;line-height:1.5;padding-top:9px;margin-top:auto;border-bottom:1px solid transparent}.trust-link span{margin-left:10px}.trust-strip>a:hover .trust-link{border-color:var(--hg-midnight-blue)}
.evidence-intro{padding-right:0;max-width:350px}.people-layout .text-link{max-width:100%}
@media(max-width:760px){.trust-strip{grid-template-columns:1fr;gap:0;padding:0}.trust-strip>a,.trust-strip>a+a{padding:24px 0;border-left:0;gap:10px}.trust-strip>a+a{border-top:1px solid #050D2C33}.trust-value{font-size:28px}.trust-detail{font-size:13px;max-width:none}.trust-link{padding-top:2px}.hero-art{top:350px}.hero-copy>.text-link{font-size:10px;gap:14px}.people-layout .text-link{font-size:11px;gap:16px}.evidence-intro{max-width:none}}

/* People: restrained typographic hierarchy, with tonal supporting information.
   Portrait artwork remains provisional pending the original photographs. */
.team-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:64px 40px;align-items:start}
.team-card{border:0;padding:0;max-width:248px;min-width:0}
.team-portrait{display:block;width:192px;max-width:100%;height:auto;aspect-ratio:3/4;margin:0 0 22px;background:transparent}
.team-card h2{font-size:28px;line-height:1.08;letter-spacing:-.035em;color:var(--hg-midnight-blue);text-wrap:balance}
.team-card .role{font-family:'Die Grotesk B',Arial,sans-serif;font-size:16px;line-height:1.35;font-weight:500;color:var(--hg-lavender);margin:10px 0 0}
.team-name{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px}
.team-qualification{font-size:12px;line-height:1.4;font-weight:500;letter-spacing:0;color:var(--hg-coral)}
.team-card .bio{font-size:14px;line-height:1.55;margin-top:14px;max-width:100%;color:var(--hg-midnight-blue);opacity:.68}
@media(max-width:1100px){.team-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px}}
@media(max-width:760px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 24px}.team-portrait{margin-bottom:18px}.team-card h2{font-size:25px}.team-card .role{font-size:14px;margin-top:9px}.team-card .bio{font-size:13px}.team-name{gap:4px 7px}.team-qualification{font-size:11px}}
@media(max-width:380px){.team-grid{grid-template-columns:1fr;gap:42px}.team-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px;max-width:none}.team-portrait{width:88px;margin:0}.team-card h2{font-size:23px}.team-card .role{font-size:13px}.team-card .bio{font-size:12px}.team-qualification{font-size:11px}}

/* Shared headline system: serif emphasis always carries a colour accent. */
h1 .heading-accent{font:inherit;letter-spacing:inherit;color:var(--hg-lavender)}
h2.display-heading{font-family:'Die Grotesk B',Arial,sans-serif;font-weight:400;font-style:normal;letter-spacing:-.04em;line-height:1.02}
h2.display-heading .heading-expression{font-family:'Frame Head',Georgia,serif;font-size:1em;font-weight:400;font-style:normal;line-height:inherit;letter-spacing:inherit;color:var(--hg-lavender)}

/* Name the offering first, with its human purpose directly below. */
.hero-purpose{font-family:'Die Grotesk B',Arial,sans-serif;font-size:clamp(30px,4.6vw,76px);font-weight:400;line-height:1.1;letter-spacing:-.035em;color:var(--hg-lavender);margin-top:22px}
.hero-purpose-emphasis{font-family:'Frame Head',Georgia,serif;font-weight:400;font-style:normal;color:var(--hg-coral)}
@media(max-width:760px){.hero-purpose{font-size:clamp(30px,8.2vw,50px);margin-top:18px}}

/* Mouse users explore variation directly; touch and keyboard retain controls. */
/* Hidden from first paint on the same devices direction.js treats as hover devices, so it never flashes before the script runs. */
@media(min-width:761px) and (hover:hover) and (pointer:fine){.hero:not([data-hover-figure="false"]) .field-controls button{opacity:0;pointer-events:none}.hero:not([data-hover-figure="false"]) .field-controls:focus-within button{opacity:1;pointer-events:auto}}
#trajectory-field:focus-visible{outline:2px solid var(--hg-light-blue);outline-offset:-18px}

.variation-icon{flex-shrink:0}
.signal-science-link{margin-top:28px;font-size:11px;gap:20px;color:var(--hg-lavender)}
.signal-science-link span{font-size:18px}

/* Give the population sculpture the full right-hand composition. */
.hero:is([data-figure-treatment="resolution"],[data-figure-treatment="diseases"]) .hero-art{left:48%;right:var(--gutter)}
.hero:is([data-figure-treatment="resolution"],[data-figure-treatment="diseases"]) .art-tag{right:0;bottom:7%}
@media(min-width:761px) and (max-width:1100px){.hero:is([data-figure-treatment="resolution"],[data-figure-treatment="diseases"]) .hero-art{left:43%;right:-5%}}
@media(max-width:760px){.hero:is([data-figure-treatment="resolution"],[data-figure-treatment="diseases"]) .hero-art{left:var(--gutter);right:var(--gutter);mask-image:none;-webkit-mask-image:none}.hero:is([data-figure-treatment="resolution"],[data-figure-treatment="diseases"]) .art-tag{right:0;bottom:0}}

.masthead nav a[aria-current="page"],.mobile-menu a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}

/* Science: one foundation extending along three clear axes. */

/* Soften artwork edges without fading the figure label. */
.hero-art{mask-image:none;-webkit-mask-image:none;opacity:1}
.hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,var(--hg-midnight-blue),transparent 7%,transparent 95%,var(--hg-midnight-blue))}
@media(min-width:761px) and (max-width:1100px){.hero:is([data-figure-treatment="resolution"],[data-figure-treatment="diseases"]) .art-tag{right:calc(5vw + var(--gutter))}}
@media(max-width:760px){#trajectory-field{opacity:.9}.hero-art::after{background:linear-gradient(to bottom,var(--hg-midnight-blue),transparent 15%,transparent 85%,var(--hg-midnight-blue))}.hero:is([data-figure-treatment="resolution"],[data-figure-treatment="diseases"]) .hero-art::after{content:none}}

/* Optional disease-labelled study: labels sit outside the canvas edge mask. */
.disease-labels{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none;opacity:0}
.disease-tag{position:absolute;top:0;left:0;box-sizing:border-box;width:32px;height:196px;padding:14px 8px;background:var(--hg-lavender);color:var(--hg-midnight-blue);font-family:'Die Grotesk A',Arial,sans-serif;font-size:13px;font-weight:500;line-height:1.2;letter-spacing:.01em;writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap}
.disease-tag-coral{background:var(--hg-coral)}
.hero:is([data-figure-treatment="resolution"],[data-figure-treatment="diseases"]) .hero-art::after{content:none}
@media(min-width:761px) and (max-width:1100px){.hero[data-figure-treatment="diseases"] .hero-art{right:var(--gutter)}.hero[data-figure-treatment="diseases"] .art-tag{right:0}}
@media(max-width:1100px){.disease-tag{width:24px;height:170px;padding:12px 5px;font-size:11px}}

/* Fine channels resolve into binary using the approved Science palette. */
.people-art::before{content:"";position:absolute;left:-24px;top:0;bottom:0;width:1px;background:var(--line)}
.leadership-channels{display:block;width:100%;height:auto;overflow:visible}
.leadership-lavender{color:var(--hg-lavender);--channel-stroke:url(#leadership-lavender)}
.leadership-coral{color:var(--hg-coral);--channel-stroke:url(#leadership-coral)}
.leadership-line,.leadership-flow{stroke:var(--channel-stroke);stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke}
.leadership-line{opacity:var(--strength)}
.leadership-flow{stroke-dasharray:6 100;stroke-width:1.35;opacity:calc(var(--strength)*.55);animation:leadership-travel 5.4s linear infinite;animation-play-state:paused;animation-delay:var(--travel-delay)}
.leadership-source{fill:var(--hg-coral)}
.leadership-binary{fill:currentColor;font-family:'Die Grotesk A',Arial,sans-serif;font-size:10.5px;letter-spacing:0;opacity:var(--strength)}
.leadership-bit-small{font-size:9.5px;font-weight:400}
.leadership-bit-regular{font-size:10.5px;font-weight:400}
.leadership-bit-medium{font-size:11.5px;font-weight:500}
.leadership-bit-large{font-size:12.5px;font-weight:500}
.leadership-bits tspan{animation:leadership-bit-flow var(--bit-duration,5.4s) ease-in-out infinite;animation-delay:var(--bit-delay);animation-play-state:paused}
.leadership-channels.is-flowing .leadership-flow,.leadership-channels.is-flowing .leadership-bits tspan{animation-play-state:running}
@keyframes leadership-travel{from{stroke-dashoffset:0}to{stroke-dashoffset:-106}}
@keyframes leadership-bit-flow{0%,72%,100%{opacity:0}18%,48%{opacity:1}}
@media(max-width:760px){.people-art::before{left:0;right:0;top:-16px;bottom:auto;width:auto;height:1px}}
@media(prefers-reduced-motion:reduce){.leadership-flow{display:none}.leadership-bits tspan{animation:none;opacity:1}}

.evidence-intro .text-link{margin-top:22px}

.footer-top>a:only-child{margin-left:auto;text-align:right}

.hero-topline .hero-edition{margin-left:auto}

/* Align the visible letter tops with the resting sculpture on desktop. */
@media(min-width:761px){.hero-copy{padding-top:var(--hero-copy-top,24px)}}


.news-list a{display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid #050D2C33;padding:30px 0;color:var(--hg-midnight-blue)}
.news-list a:last-child{border-bottom:1px solid #050D2C33}
.news-list h2{font-family:'Die Grotesk B',Arial,sans-serif;font-size:clamp(26px,3vw,44px);font-weight:400;line-height:1.05;letter-spacing:-.03em;max-width:900px;margin-top:10px}
.news-list .eyebrow{color:var(--hg-midnight-blue);opacity:.7}
.news-list .round-arrow{flex-shrink:0}
.signal-scroll{position:relative}.signal-scroll>.signal-explorer{position:sticky}
/* Safari can leave a masked, continuously redrawn canvas unpainted, so the hero fades are an overlay rather than a mask. */
.hero-accent{color:var(--hg-coral)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-word{display:inline-block;transition:opacity .9s ease-in-out}.hero-word.is-leaving{opacity:0}.hero-word.is-entering{opacity:0;transition:none}
.article-back{display:inline-block;font-size:13px;color:var(--lime);margin-bottom:40px}.article-back:hover{color:var(--coral)}
.article .detail-hero h1{font-size:clamp(44px,5.6vw,96px);max-width:1200px}
.approach-hero h1{font-size:clamp(44px,6vw,104px);max-width:1250px}
.approach-hero .heading-coral{color:var(--hg-coral)}
.article-body{max-width:720px;margin-left:33%}
.article-body h2{font-family:'Die Grotesk B',Arial,sans-serif;font-size:clamp(28px,2.6vw,40px);line-height:1.1;letter-spacing:-.03em;margin:64px 0 20px}
.article-body p,.article-body li{font-size:18px;line-height:1.6;color:#050D2C}
.article-body p{margin:0 0 1em}
.article-body ul{margin:0 0 1em;padding-left:1.1em}.article-body li{margin-bottom:.5em}.article-body li::marker{color:var(--coral)}
.article-body .post-figure{margin:56px 0 56px calc((100vw - 2 * var(--gutter)) * -.33);width:calc(100vw - 2 * var(--gutter))}
.article-body .post-figure video{display:block;width:100%;height:auto;aspect-ratio:2400/1300;background:#050D2C}
.article-related{margin-top:40px!important;padding-top:22px;border-top:1px solid #050D2C33}.article-related a{border-bottom:1px solid currentColor;padding-bottom:4px}
@media(max-width:760px){.article-back{margin-bottom:28px}.article-body{margin-left:0}.article-body h2{margin-top:44px}.article-body p,.article-body li{font-size:16px}.article-body .post-figure{margin:36px 0;width:100%}}
/* The banner sits above the masthead, so the menu drops to its static position below the header instead of a fixed offset. */
.announcement{background:var(--hg-coral)}.announcement-link{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 16px;padding:10px var(--gutter);font-family:'Die Grotesk B',Arial,sans-serif;font-weight:500;font-size:clamp(13px,1vw,15px);line-height:1.4;color:var(--hg-midnight-blue)}.announcement-cta{text-decoration:underline;text-underline-offset:3px}.announcement-link:hover .announcement-cta,.announcement-link:focus-visible .announcement-cta{text-decoration-thickness:2px}.mobile-menu{top:auto}
.mission-heading{font-size:clamp(44px,5.6vw,100px)!important}.purpose h3{font-size:clamp(24px,2vw,30px);line-height:1.15;margin:44px 0 10px}.purpose h4{font-size:16px;font-weight:500;margin:0 0 8px}
@media(max-width:760px){.mission-heading{font-size:9.5vw!important}}

@media(max-width:760px){.invitation-bottom{flex-direction:column;gap:14px}.invitation-bottom p{font-size:13px}.invitation-bottom p br{display:none}.invitation-bottom>span{max-width:none;font-size:12px}.footer-top>a{display:inline-block;padding:12px 0}.footer-bottom{font-size:11px}.footer-bottom>div{flex-wrap:wrap;gap:0 22px}.footer-bottom a{display:inline-block;padding:12px 0}}
.media-boilerplate h3{font-family:'Die Grotesk A',Arial,sans-serif;font-size:11px;font-weight:400;letter-spacing:.065em;text-transform:uppercase;margin:0 0 10px}.media-boilerplate h3:not(:first-child){margin-top:40px}.copy-button{font-size:12px;padding:8px 16px;border:1px solid var(--hg-midnight-blue);border-radius:999px;background:none;color:var(--hg-midnight-blue);cursor:pointer;margin-top:4px}
.logo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:32px}.logo-tile{margin:0}.logo-tile-art{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;padding:12%;background:#fff;border:1px solid #050D2C1F}.logo-tile-dark .logo-tile-art{background:var(--hg-midnight-blue);border-color:var(--hg-midnight-blue)}.logo-tile-art img{max-width:100%;max-height:100%;width:auto;height:auto}.logo-tile figcaption{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px;padding-top:12px}.logo-tile figcaption span{opacity:.7}.logo-tile figcaption a{flex-basis:100%;padding:6px 0}
@media(max-width:760px){.logo-grid{grid-template-columns:1fr}}
.hero-media-link{margin:24px 0 0 33%}@media(max-width:760px){.hero-media-link{margin-left:0}}
#main .detail-section p a{text-decoration:underline;text-underline-offset:3px}