:root { color-scheme:dark; --void:#07111f; --surface:#0e1c30; --cloud:#f4f8fc; --ink:#09111c; --mist:#dcebfa; --signal:#4de1d0; --orbit:#8da7ff; --slate:#6f839d; --line:rgba(220,235,250,.16); --quiet:rgba(220,235,250,.72); --shadow:0 2.8px 2.2px rgba(0,0,0,.034),0 6.7px 5.3px rgba(0,0,0,.048),0 12.5px 10px rgba(0,0,0,.06),0 22.3px 17.9px rgba(0,0,0,.072),0 41.8px 33.4px rgba(0,0,0,.086),0 100px 80px rgba(0,0,0,.12); --ease:cubic-bezier(.22,.85,.24,1); }
[data-theme="light"] { color-scheme:light; --void:#f4f8fc; --surface:#e5eef8; --cloud:#09111c; --ink:#09111c; --mist:#dcebfa; --signal:#067f7a; --orbit:#536dd6; --slate:#4b617a; --line:rgba(9,17,28,.14); --quiet:rgba(9,17,28,.72); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--void); color:var(--cloud); font:16px/1.6 "DM Sans",sans-serif; transition:background .5s var(--ease),color .5s var(--ease); overflow-x:hidden; } a { color:inherit; text-decoration:none; } button { font:inherit; } a:focus-visible,button:focus-visible { outline:2px solid var(--signal); outline-offset:4px; } .skip-link { position:absolute; top:-70px; left:20px; padding:11px 16px; background:var(--cloud); color:var(--void); z-index:10; border-radius:99px; }.skip-link:focus { top:20px; }
.hmp-header { width:min(1280px,calc(100% - 48px)); min-height:64px; margin:24px auto 0; padding:8px 10px 8px 16px; border:1px solid var(--line); border-radius:999px; display:flex; align-items:center; gap:28px; position:relative; z-index:3; background:color-mix(in srgb,var(--void) 75%,transparent); box-shadow:0 2px 3px -1px rgba(0,0,0,.1),0 1px 0 rgba(25,28,33,.02),0 0 0 1px rgba(25,28,33,.08); }.hmp-brand { display:inline-flex; gap:10px; align-items:center; font-family:Syne,sans-serif; font-weight:700; letter-spacing:-.06em; white-space:nowrap; }.hmp-brand-mark { width:29px; height:29px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:5px; border-radius:50%; background:var(--signal); transform:rotate(-20deg); }.hmp-brand-mark i { display:block; border-radius:99px; background:var(--void); }.hmp-brand-mark i:nth-child(2) { transform:translateY(5px); }.hmp-brand-mark i:nth-child(3) { transform:translateY(10px); }.hmp-header nav { display:flex; gap:28px; margin:auto; color:var(--quiet); font-size:12px; }.hmp-header nav a:hover,.plain-link:hover { color:var(--signal); }.hmp-actions { display:flex; align-items:center; gap:8px; }.theme-toggle { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); color:var(--cloud); background:transparent; cursor:pointer; }.hmp-contact,.hmp-button { display:inline-flex; gap:10px; align-items:center; padding:7px 8px 7px 18px; min-height:42px; border-radius:999px; font-size:12px; font-weight:700; background:var(--cloud); color:var(--void); transition:transform .35s var(--ease),background .35s var(--ease); }.hmp-contact span,.hmp-button span { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:var(--cloud); background:var(--void); font-size:15px; transition:transform .35s var(--ease); }.hmp-contact:hover,.hmp-button:hover { transform:translateY(-2px); }.hmp-contact:hover span,.hmp-button:hover span { transform:translate(2px,-1px); }
.hmp-hero { width:min(1280px,calc(100% - 48px)); min-height:calc(100dvh - 110px); margin:auto; display:grid; grid-template-columns:.93fr 1.07fr; align-items:center; gap:30px; position:relative; padding:80px 0 110px; }.hero-grid { position:absolute; inset:0; pointer-events:none; opacity:.25; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:80px 80px; mask-image:radial-gradient(ellipse 72% 62% at 63% 43%,#000 0%,transparent 75%); }.hero-copy,.constellation-shell { position:relative; z-index:1; }.hmp-eyebrow { display:flex; gap:10px; align-items:center; margin:0 0 22px; color:var(--quiet); font:500 10px/1.2 "DM Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }.hmp-eyebrow span { height:1px; width:27px; background:var(--signal); }.hmp-hero h1,.section-wrap h2 { margin:0; font-family:Syne,sans-serif; font-weight:700; letter-spacing:-.085em; line-height:.86; text-wrap:balance; }.hmp-hero h1 { font-size:clamp(69px,9.8vw,150px); }.hmp-hero h1 em,.section-wrap h2 em { color:var(--signal); font-style:normal; }.hero-lede { max-width:430px; margin:34px 0 31px; color:var(--quiet); font-size:clamp(17px,1.5vw,20px); }.hero-links { display:flex; align-items:center; gap:24px; }.hmp-button { background:var(--signal); }.hmp-button span { background:var(--void); }.plain-link { display:inline-flex; gap:8px; align-items:center; color:var(--cloud); font-size:13px; font-weight:600; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--cloud) 30%,transparent); text-underline-offset:6px; transition:color .3s var(--ease); }.constellation-shell { min-height:600px; display:grid; place-items:center; }.constellation-shell canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; }.constellation-shell>p { z-index:2; align-self:end; margin:0 0 22px; color:var(--quiet); font:10px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }.constellation-shell>p i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--signal); margin-right:8px; }.constellation-fallback { position:absolute; width:min(80%,480px); aspect-ratio:1; border:1px solid var(--line); border-radius:50%; transform:rotate(-18deg); }.constellation-fallback span { position:absolute; inset:16%; border:1px solid var(--orbit); border-radius:50%; }.constellation-fallback span:nth-child(2) { transform:rotate(62deg); }.constellation-fallback span:nth-child(3) { inset:34%; border-color:var(--signal); }.constellation-fallback b { position:absolute; inset:39%; border-radius:50%; background:var(--signal); box-shadow:var(--shadow); }.hero-coordinate { position:absolute; bottom:42px; left:0; color:var(--slate); font:10px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.section-wrap { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:160px 0; }.mission-section { border-top:1px solid var(--line); }.mission-layout { display:grid; grid-template-columns:1.35fr .65fr; gap:90px; align-items:end; }.section-wrap h2 { font-size:clamp(50px,6.5vw,96px); }.mission-copy { max-width:370px; }.mission-copy p { margin:0 0 28px; color:var(--quiet); font-size:18px; }.product-section { padding-top:115px; }.section-intro { display:flex; justify-content:space-between; align-items:end; margin-bottom:58px; }.section-intro .hmp-eyebrow { align-self:start; }.product-card { padding:7px; border:1px solid var(--line); border-radius:35px; background:color-mix(in srgb,var(--surface) 80%,transparent); box-shadow:var(--shadow); }.product-card-main { min-height:490px; padding:58px; border-radius:28px; overflow:hidden; position:relative; display:grid; grid-template-columns:1fr .85fr; align-items:center; background:radial-gradient(circle at 82% 32%,color-mix(in srgb,var(--orbit) 31%,transparent),transparent 30%),radial-gradient(circle at 68% 78%,color-mix(in srgb,var(--signal) 20%,transparent),transparent 33%),var(--surface); }.product-card-top,.product-card-footer { padding:16px 20px; display:flex; justify-content:space-between; color:var(--slate); font:9px "DM Mono",monospace; letter-spacing:.1em; }.product-name { display:flex; align-items:center; gap:9px; margin:0 0 14px; font:600 15px Syne,sans-serif; }.product-name i { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; background:#244439; color:#f2eee7; font-family:serif; }.product-card h3 { max-width:560px; margin:0; font:600 clamp(43px,5vw,70px)/.93 Syne,sans-serif; letter-spacing:-.08em; }.product-card h3+p { max-width:370px; margin:23px 0 27px; color:var(--quiet); }.product-button { background:var(--cloud); color:var(--void); }.product-orbit { position:relative; height:360px; }.product-orbit span:not(.orbit-core),.product-orbit small { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; }.product-orbit .orbit-one { width:330px; aspect-ratio:1; border:1px solid var(--signal); }.product-orbit .orbit-two { width:230px; aspect-ratio:1; border:13px solid color-mix(in srgb,var(--orbit) 55%,transparent); transform:translate(-50%,-50%) rotate(52deg) scaleY(.54); }.product-orbit .orbit-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:124px; aspect-ratio:1; border-radius:50%; background:#244439; color:#f2eee7; font:italic 45px Georgia,serif; box-shadow:var(--shadow); }.product-orbit small { margin:0; transform:translate(55px,72px); color:var(--cloud); font:9px/1.25 "DM Mono",monospace; letter-spacing:.1em; }.more-row { margin-top:24px; display:flex; align-items:center; justify-content:space-between; color:var(--quiet); }.more-row p { margin:0; font:500 clamp(24px,3vw,38px) Syne,sans-serif; letter-spacing:-.06em; }.more-row span { color:var(--slate); font-size:13px; }
.people-section { padding-top:115px; }.people-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.audience-card { min-height:360px; padding:30px; position:relative; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; border:1px solid var(--line); border-radius:30px; box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 1px -.5px rgba(0,0,0,.06),0 3px 3px -1.5px rgba(0,0,0,.06),0 6px 6px -3px rgba(0,0,0,.06),0 12px 12px -6px rgba(0,0,0,.06),0 24px 24px -12px rgba(0,0,0,.06); }.audience-clinics { background:var(--surface); }.audience-owners { background:var(--mist); color:var(--ink); }.audience-card>span { color:var(--slate); font:10px "DM Mono",monospace; }.audience-card h3 { margin:0; font:600 clamp(35px,4vw,55px)/.9 Syne,sans-serif; letter-spacing:-.08em; }.audience-card p { max-width:330px; margin:20px 0 0; color:var(--quiet); }.audience-owners p { color:rgba(9,17,28,.69); }.audience-card>b { position:absolute; top:25px; right:30px; font:300 45px/1 DM Sans,sans-serif; color:var(--signal); }.hmp-footer { width:min(1280px,calc(100% - 48px)); min-height:148px; margin:auto; border-top:1px solid var(--line); display:flex; align-items:center; gap:40px; justify-content:space-between; color:var(--quiet); font-size:12px; }.hmp-footer>a:last-child { color:var(--cloud); text-decoration:underline; text-underline-offset:6px; }
@media (max-width:820px) { .hmp-header nav { display:none; }.hmp-hero { grid-template-columns:1fr; text-align:center; padding-top:72px; }.hero-copy { margin:auto; }.hmp-eyebrow,.hero-links { justify-content:center; }.hero-lede { margin-left:auto; margin-right:auto; }.constellation-shell { min-height:470px; margin-top:-20px; }.hero-coordinate { display:none; }.mission-layout { grid-template-columns:1fr; gap:36px; }.mission-copy { max-width:500px; }.product-card-main { grid-template-columns:1fr; min-height:690px; }.product-orbit { position:absolute; right:-10%; bottom:-84px; width:420px; opacity:.78; }.people-grid { grid-template-columns:1fr; }.audience-card { min-height:295px; }.section-intro { display:block; }.section-intro .hmp-eyebrow { margin-bottom:22px; } }
@media (max-width:560px) { .hmp-header,.hmp-hero,.section-wrap,.hmp-footer { width:calc(100% - 28px); }.hmp-header { margin-top:14px; padding-left:12px; }.hmp-contact { font-size:0; min-width:40px; padding:6px; justify-content:center; }.hmp-contact span { margin:0; }.hmp-actions { margin-left:auto; }.hmp-hero { padding:62px 0 75px; }.hmp-hero h1 { font-size:clamp(40px,14.5vw,84px); }.hero-links { flex-direction:column; gap:20px; }.constellation-shell { min-height:360px; }.constellation-shell>p { font-size:8px; }.section-wrap { padding:100px 0; }.section-wrap h2 { font-size:50px; }.mission-copy p { font-size:17px; }.product-section,.people-section { padding-top:74px; }.product-card { border-radius:24px; }.product-card-top,.product-card-footer { padding:14px 12px; font-size:7px; }.product-card-main { min-height:600px; padding:34px 24px; border-radius:18px; }.product-card h3 { font-size:45px; }.product-orbit { right:-78px; bottom:-110px; transform:scale(.8); transform-origin:bottom right; }.more-row { display:block; }.more-row span { display:block; margin-top:8px; }.audience-card { min-height:300px; padding:24px; }.hmp-footer { min-height:170px; align-content:center; flex-wrap:wrap; gap:8px 24px; }.hmp-footer p { order:3; width:100%; margin:0; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .hmp-contact,.hmp-button,.hmp-contact span,.hmp-button span { transition:none; } }
[data-motion="reduce"] { scroll-behavior:auto; }