/* Creato Display — the Vertevance brand face, self-hosted (SIL OFL) */ @font-face{font-family:"Creato Display";src:url("/assets/creato-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Creato Display";src:url("/assets/creato-medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Creato Display";src:url("/assets/creato-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap} /* This page commits to one look: a dark violet ground, the same in every viewer theme. Every colour is painted explicitly so nothing borrows the host background. */ :root{ color-scheme:dark; --base:#0a0520; /* page ground */ --layer-1:#100927; /* alternating sections */ --layer-2:#170e36; /* cards */ --layer-2-rgb:23,14,54; /* the same, for vignettes that need an alpha */ --layer-3:#1e1446; /* raised / feature */ --ink:#f4f0fd; --ink-2:#c9bde8; --muted:#9b8dc2; --faint:#7a6da0; --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.06); --line-bright:rgba(255,255,255,.2); --g1:#3b46f5; --g2:#8e33fb; --g3:#c93cff; --accent:#b884ff; --display:"Fraunces",Georgia,"Times New Roman",serif; --body:"Creato Display","Helvetica Neue",Arial,sans-serif; --measure:62ch; --gutter:clamp(20px,5vw,60px); --r-lg:16px; --r-md:12px; --r-sm:9px; /* One easing and one set of durations for every hover on the page. The curve is eased at both ends rather than launching from the first frame — a fast-start ease-out reads as a flinch on a card that is only lifting a couple of pixels. And the durations sit close together on purpose: most hovers move a transform, a border and a shadow at once, and when those run at noticeably different speeds the one movement arrives in pieces, which is what made them feel unsettled. */ --ease:cubic-bezier(.32,.04,.18,1); --t-fast:.46s; --t:.56s; --t-slow:.84s; --t-xslow:1.25s; --ease-soft:cubic-bezier(.4,.1,.25,1); /* the team band's dissolve: long, and eased at both ends so neither the start nor the settle has a visible edge */ --t-cross:1.8s; --ease-cross:cubic-bezier(.45,.02,.25,1); /* arriving: slower than a hover and eased out hard, so blocks settle rather than snap — one curve for every reveal on the page */ --t-reveal:.78s; --ease-reveal:cubic-bezier(.22,.68,.28,1); } *{box-sizing:border-box} body{ margin:0; background:var(--base); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; /* touch now has its own deliberate :active styling (see the "Touch equivalent" block) on everything that used to only have :hover, so the browser's own default grey tap-flash is switched off globally — otherwise every press would show both the native flash and our custom one at once. */ -webkit-tap-highlight-color:transparent; } a{color:inherit} img{display:block;max-width:100%} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)} .wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:var(--gutter)} h1,h2,h3.d{font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0;letter-spacing:-.014em} /* a whisper of grain, so the large dark fields don't band */ body::after{ content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- logo: brand mark as a mask, wordmark as live type ---------- */ /* flex-shrink:0 matters as soon as nav can no longer fit beside it at its natural width — without it, the logo was the only flexible party in the masthead's flex row and took the squeeze instead of nav, and since the lockup image has a fixed height with width:auto, a squeezed box forced its rendered width narrower than its height-correct width: a visibly squashed mark. Nav is the side that should give way (it already knows how to scroll), never the logo. */ .logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex-shrink:0} .logo .mark{ width:46px;height:40px;flex:none; background:linear-gradient(108deg,var(--g1) 0%,var(--g2) 50%,var(--g3) 100%); -webkit-mask:url("/assets/mark-mask.png") center/contain no-repeat; mask:url("/assets/mark-mask.png") center/contain no-repeat; } .logo .word{display:block;line-height:1} .logo .word b{display:block;font-weight:700;font-size:23px;letter-spacing:-.022em} .logo .word i{display:block;font-style:normal;font-weight:400;font-size:17px;margin-top:2px;letter-spacing:-.006em;color:var(--ink-2)} .logo .mark{transition:filter var(--t-slow) var(--ease),transform var(--t) var(--ease)} .logo .mark{background-size:260% 100%;background-position:0% 50%} @keyframes markSweep{ 0%{background-position:0% 50%} 55%{background-position:100% 50%} 100%{background-position:0% 50%} } .logo::after{ content:"";position:absolute;left:-9px;top:50%;width:64px;height:58px; transform:translateY(-50%) scale(.7);border-radius:50%;pointer-events:none;opacity:0; background:radial-gradient(closest-side,rgba(201,60,255,.5),transparent 72%); transition:opacity var(--t) var(--ease),transform var(--t) var(--ease); } .logo{position:relative} /* the masthead sits on a solid brand-blue field now rather than the dark glass every other surface uses, so its own logo is the flat white lockup asset rather than the gradient-mask mark + live type — a gradient mark would fight the blue instead of sitting on it, and the wordmark's ink colour assumes a dark ground. The footer keeps the original mark+word treatment; only the header swaps. */ .logo--lockup img{display:block;height:34px;width:auto;transition:transform var(--t) var(--ease),filter var(--t) var(--ease)} .logo--lockup::after{display:none} /* ---------- product imagery ---------- Every render is cut out to transparency, so each one sits on the same ground with a violet bloom behind it. To swap: replace the file with another cut-out of roughly the same proportion. */ .shot{position:relative;margin:0} .shot .stage>img,.shot>img{ will-change:transform,filter;backface-visibility:hidden;transform-origin:50% 52%; transform:scale(.925); transition:transform var(--t-slow) var(--ease),filter var(--t-slow) var(--ease); } .shot .stage::before{transition:box-shadow var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)} .shot>img{width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))} .dial-feature .shot::before{display:none} .shot::before{ content:"";position:absolute;z-index:-1;inset:4% -10% -6% -10%;border-radius:50%; background:radial-gradient(closest-side,rgba(201,60,255,.32),rgba(201,60,255,0) 72%); } figcaption{ margin-top:14px;font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0; font-style:italic;font-weight:400;font-size:13.5px;letter-spacing:0; color:var(--faint);text-align:center; } /* the hero render sits on a staging dial — a hairline ring with degree ticks, borrowed from the geometry of the mark rather than added as another image */ .stage{position:relative;aspect-ratio:1;display:grid;place-items:center;isolation:isolate} .stage::before,.stage::after{content:"";position:absolute;border-radius:50%;pointer-events:none} .stage::before{ inset:4%; border:1px solid rgba(255,255,255,.13); background:radial-gradient(closest-side,rgba(201,60,255,.26),rgba(142,51,251,.08) 58%,transparent 72%); } .stage::after{ inset:4%; background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.34) 0deg .45deg,transparent .45deg 7.5deg); -webkit-mask:radial-gradient(closest-side,transparent 0 92.5%,#000 93% 100%); mask:radial-gradient(closest-side,transparent 0 92.5%,#000 93% 100%); } .stage>img{position:relative;z-index:1;width:95%;height:auto;filter:drop-shadow(0 34px 62px rgba(0,0,0,.66))} .stage--tall>img{width:85%} /* ---------- masthead + hero ---------- */ .top{position:relative;overflow:hidden;isolation:isolate;background:var(--base)} .top::before,.top::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none} /* corner light, not a spotlight: pulled well back into the corners and scaled down so neither wash reaches the render sitting in the middle of the hero — a large, plainly-circular bloom drifting and swelling right behind the product image read as a stray shape wandering across it rather than atmosphere. Static and understated instead, the way depth is usually added to a dark hero: felt at the edges, not seen as an object. */ .top::before{right:-22%;top:-58%;width:46%;aspect-ratio:1;background:radial-gradient(circle,rgba(201,60,255,.22),rgba(201,60,255,0) 68%)} .top::after{left:-24%;bottom:-64%;width:40%;aspect-ratio:1;background:radial-gradient(circle,rgba(59,70,245,.2),rgba(59,70,245,0) 68%)} /* the narrow professional-use strip that sits above everything else — kept unobtrusive on purpose, a single line rather than a banner */ .util{background:var(--layer-1);border-bottom:1px solid var(--line-soft)} .util .wrap{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;justify-content:space-between;padding-block:9px;font-size:12.5px;color:var(--muted)} .util a{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);text-decoration:none;font-weight:500;white-space:nowrap;transition:color var(--t-fast) var(--ease)} .util a span{transition:transform var(--t) var(--ease)} .masthead{ position:sticky;top:env(safe-area-inset-top,0px);z-index:30; background:linear-gradient(90deg,var(--g1) 0%,var(--g2) 100%); border-bottom:1px solid rgba(255,255,255,.14); } .masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:14px} nav{display:flex;gap:26px;align-items:center} nav a{font-size:14px;color:var(--ink-2);text-decoration:none;padding-block:5px;white-space:nowrap;transition:color var(--t-fast) var(--ease)} /* the header's own nav sits on the new solid brand-blue field rather than the near-black ground var(--ink-2) was tuned for, where it read as a soft, receded secondary tone. On blue that same tone loses too much contrast to read comfortably at rest, so it lightens here only; every other nav — the pathway tabs, the masthead on every other surface (there is only one) — is unaffected since this is scoped to .masthead specifically. */ .masthead nav a{color:rgba(255,255,255,.82)} /* the masthead's own nav underline: fully re-declared rather than patched, so it can't inherit anything from the generic "wipes in on hover" component every other nav (footer, pathway tabs) still uses. Two things that component does are wrong specifically here: its colour is the brand blue-to-purple gradient, which all but disappears into the masthead's own blue/purple field; and it reveals itself with `transform:scaleX()` from a `border-radius`ed bar, which — because the corner radius scales down along with the bar during the animation — reads as the line tapering to a point at each end while it wipes in, rather than the same-thickness bar simply getting longer. Growing the `width` instead keeps the bar's own height fixed throughout, so it draws in left-to-right at one constant thickness and stays that way — no thinning, no taper, on the way in or at rest. */ .masthead nav a:not(.btn)::after{ left:0;right:auto;width:0;height:2.5px;background:#fff; transform:none;transition:width var(--t) var(--ease); } .masthead nav a.is-active{color:#fff} /* the page you're actually on needs this same line permanently drawn in, not just on hover — arriving should look like the hover wipe simply finished and stayed, at the same width, weight and colour, on every page you land on. */ .masthead nav a.is-active:not(.btn)::after{ left:0;right:auto;width:100%;height:2.5px;bottom:0;background:#fff;transform:none; } @media (hover:hover) and (pointer:fine){ .masthead nav a:not(.btn):hover::after{width:100%} } .masthead nav a:not(.btn):focus-visible::after, .masthead nav a:not(.btn):active::after{width:100%} /* below 940px the full nav plus the HCP pill no longer fit next to the logo at natural width. Nav becomes the side that gives way — a scrollable, fade-masked strip with the full link set (still reachable, just a swipe away) and a taller tap target — rather than the logo being squeezed by the flex row, which is what used to happen (and is also why it looked squashed). Live from 940px down, not just on phones, so an iPad in portrait gets the same treatment as a phone instead of a narrower non-scrolling nav that could still crowd the logo. */ @media (max-width:940px){ nav{gap:18px;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none;margin-left:auto;max-width:60vw; -webkit-mask:linear-gradient(90deg,#000 84%,transparent); mask:linear-gradient(90deg,#000 84%,transparent)} nav::-webkit-scrollbar{display:none} nav .hide-md{display:inline} nav a{padding-block:12px} /* a 44px-tall target, not 32 */ } @media (max-width:560px){ /* one more notch down for the logo itself: at phone widths the lockup at its tablet/desktop size left the header feeling tight against the nav strip beside it. A touch shorter, and the masthead's own vertical padding eases slightly with it, so the whole bar reads as sized for a phone rather than a shrunk-down desktop bar. */ .logo--lockup img{height:29px} .masthead .wrap{padding-block:11px} nav{gap:14px;max-width:54vw} } .hcp-btn{padding:10px 18px;font-size:13.5px;flex:none} @media (max-width:640px){ .hide-sm{display:none} } .hero .wrap{ display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr); gap:clamp(24px,5vw,64px);align-items:center; padding-block:clamp(54px,8vw,100px) clamp(44px,6vw,78px); } .eyebrow{font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0;font-style:italic;font-weight:400;font-size:16px;letter-spacing:0;color:var(--muted);margin:0 0 18px} h1{font-size:clamp(34px,4.7vw,56px);line-height:1.04;font-weight:600;margin:0 0 22px;text-wrap:balance} h1 em{font-style:italic;font-weight:400;background:linear-gradient(100deg,var(--g3),#f1b6ff);-webkit-background-clip:text;background-clip:text;color:transparent} .lede{font-size:clamp(16px,1.5vw,18.5px);color:var(--ink-2);max-width:var(--measure);margin:0 0 30px} .dial-feature .shot{max-width:460px;margin-inline:auto} @media (max-width:880px){ .hero .wrap{grid-template-columns:1fr} .dial-feature .shot{max-width:300px;margin-top:10px} } .actions{display:flex;flex-wrap:wrap;gap:12px} .btn{ display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500; text-decoration:none;padding:14px 26px;border-radius:11px;border:1px solid transparent; transition:transform var(--t) var(--ease),border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease); } .btn .arw{display:inline-block;transition:transform var(--t) var(--ease);font-size:1.05em;line-height:1} .btn-primary{background:linear-gradient(100deg,var(--g1),var(--g2) 56%,var(--g3));color:#fff;box-shadow:0 10px 30px -14px rgba(201,60,255,.95),inset 0 1px 0 rgba(255,255,255,.3)} .btn-line{border-color:var(--line-bright);color:var(--ink);background:rgba(255,255,255,.025)} @media (prefers-reduced-motion:reduce){ }@media (prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){.btn:hover{transform:none}} .facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--layer-1)} .facts .wrap{display:flex;flex-wrap:wrap;gap:12px 44px;padding-block:18px;font-size:13.5px;color:var(--muted)} .facts span{display:inline-flex;align-items:center;gap:10px} .facts span::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g3))} /* ---------- section frame ---------- */ section{padding-block:clamp(54px,7vw,92px);position:relative} .alt{background:var(--layer-1);border-block:1px solid var(--line-soft)} /* heading and note share one grid so every note starts on the same line down the whole page, instead of drifting to each section's right edge */ .sec-head{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:40px;align-items:start} @media (min-width:860px){ .sec-head{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:baseline} } h2{font-size:clamp(25px,3.2vw,36px);line-height:1.12;margin:0;font-weight:600;text-wrap:balance} .sec-note{ position:relative;font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0; font-style:italic;font-weight:400;font-size:16px;line-height:1.5; color:var(--muted);margin:0;max-width:44ch;padding-left:20px; } .sec-note::before{ content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:2px;border-radius:2px; background:linear-gradient(180deg,var(--g1),var(--g3));opacity:.75; } .sec-lede{font-size:17px;color:var(--ink-2);max-width:60ch;margin:-18px 0 36px} h3.d{font-weight:600;font-size:19px;margin:0 0 10px} /* culture statement — no image, no cards, on purpose. A quiet editorial field with generous whitespace, holding one idea rather than illustrating it, right after the hero where it sets the tone for everything after. */ .culture-stmt{text-align:center;padding-block:clamp(60px,9vw,108px)} .culture-stmt .wrap{max-width:760px} .culture-eyebrow{ font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0; font-style:italic;font-weight:400;font-size:15px;color:var(--muted);margin:0 0 14px; } .culture-stmt h2{margin:0 0 20px} .culture-stmt p:not(.culture-eyebrow){font-size:18px;line-height:1.62;color:var(--ink-2);margin:0 auto;max-width:58ch} /* The brain and the spine — the two systems this company supplies, and the only picture on the page that is honestly about the range rather than about people. Two layers in exact register: the cool one the page rests on, and a warmer, busier one that comes up under the cursor, so the hover is a change of temperature and never a change of shape. */ .team{position:relative;max-width:940px;margin:0 auto clamp(30px,4vw,54px);isolation:isolate} /* Nothing moves and nothing resizes. The colour is the whole animation. The cool layer stays fully opaque underneath from beginning to end, and the warm one simply fades in over it. Fading the two against each other — one down while the other came up — put a dip in the middle of the crossfade where neither was solid, which is what made it feel like a switch rather than a flood. Held this way there is no point at which the band is dimmer than it starts or ends. */ .team img{display:block;width:100%;height:auto} /* The band does not react. It is a picture, not a control — the colour and the movement belong to the three cards under it, which are the things there is any reason to point at. */ /* Pillars — the picture above, continued. The three cards carry the band's own colours, sampled off it rather than guessed: the warm amber burning along the left of the brain, the pink through the top of the spine, and the blue its base falls away into. Read left to right they run the same sweep the picture does, so the section holds together as one thing rather than an image with three boxes under it. Each card's rule, watermark, label, heading, border and glow all come from its own pair, which is why hovering one lights it in a colour you have already seen directly above it. */ .pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:14px} .pillar{ --c1:#ff8a3d;--c2:#ff4d7d; /* amber into rose — the brain's warm side */ position:relative;overflow:hidden;padding:30px 26px 32px; background:var(--layer-2);border:1px solid var(--line);border-radius:var(--r-lg); transition:transform var(--t) var(--ease),border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease); } .pillar:nth-child(2){--c1:#ff4d9e;--c2:#a84dff} /* pink into violet */ .pillar:nth-child(3){--c1:#6b4dfb;--c2:#3da5ff} /* violet into the spine's blue */ .pillar>*{position:relative;z-index:2} .pillar::before{ content:"";position:absolute;inset:0 0 auto 0;height:3px; background:linear-gradient(90deg,var(--c1),var(--c2)); transition:height var(--t) var(--ease),filter var(--t) var(--ease); } .pillar::after{ content:"";position:absolute;right:-26px;bottom:-30px;width:150px;height:130px;z-index:0; background:linear-gradient(140deg,var(--c1),var(--c2));opacity:.08; -webkit-mask:url("/assets/mark-mask.png") center/contain no-repeat; mask:url("/assets/mark-mask.png") center/contain no-repeat; transition:opacity var(--t) var(--ease),transform var(--t) var(--ease); } /* the lift, and a bloom inside the card's own top edge — the warm light that used to come up over the band, moved to the thing worth pointing at */ .pillar .tag{color:color-mix(in srgb,var(--c1) 62%,#ffffff)} .pillar h3{transition:color var(--t-fast) var(--ease)} .tag{display:block;font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--accent);margin-bottom:13px} .pillar .tag{padding-bottom:13px;border-bottom:1px solid var(--line)} .pillar h3{margin-bottom:11px} .pillar p{margin:0;color:var(--ink-2);font-size:15.5px} /* numbered sequence */ .steps{position:relative;border-top:1px solid var(--line)} /* a spine running down the icon column, coloured through the brand ramp, with a pulse that travels it once every few seconds */ .steps::before{ content:"";position:absolute;left:22px;top:26px;bottom:26px;width:3px;border-radius:3px;z-index:0; background:linear-gradient(180deg,#4f5bff,#6b4dfb,#a83cfb,#c93cff,#e264ff);opacity:.3; } .steps::after{ content:"";position:absolute;left:18px;width:11px;height:74px;border-radius:11px;z-index:0; background:radial-gradient(closest-side,rgba(233,216,255,.85),rgba(201,60,255,.35) 55%,transparent); animation:travel 7s cubic-bezier(.45,0,.55,1) infinite; } @keyframes travel{ 0%{top:0%;opacity:0} 8%{opacity:1} 88%{opacity:1} 100%{top:92%;opacity:0} } .step{display:grid;grid-template-columns:46px 210px minmax(0,1fr);gap:clamp(14px,3vw,32px);padding-block:28px;border-bottom:1px solid var(--line);align-items:start} .stepicon{ position:relative;z-index:1;width:46px;height:46px;flex:none;border-radius:13px; display:grid;place-items:center;background:var(--layer-1); border:1px solid color-mix(in srgb,var(--c,#b884ff) 45%,transparent); box-shadow:0 0 0 5px var(--layer-1),0 0 18px -6px color-mix(in srgb,var(--c,#b884ff) 70%,transparent); transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),transform var(--t) var(--ease),box-shadow var(--t-fast) var(--ease); } .stepicon svg{width:23px;height:23px;fill:none;stroke:var(--c,var(--accent));stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round; transition:stroke var(--t-fast) var(--ease),transform var(--t) var(--ease)} .stepicon b{ position:absolute;right:-5px;bottom:-6px;font-family:var(--display); font-variation-settings:"SOFT" 0,"WONK" 0;font-size:11px;font-weight:600; font-variant-numeric:tabular-nums;color:var(--faint); background:var(--layer-1);padding:0 4px;border-radius:5px;line-height:1.5; transition:color var(--t-fast) var(--ease); } /* each icon has one moving part, idling slowly and quickening on hover */ .stepicon .ink{stroke-dasharray:14;stroke-dashoffset:14;animation:inkdraw 5s ease-in-out infinite} .stepicon .steam{animation:steam 3.6s ease-in-out infinite} .stepicon .rays{animation:rays 3.2s ease-in-out infinite} .stepicon .bars{animation:bars 3.4s ease-in-out infinite} .stepicon .star{transform-origin:12px 12px;animation:twinkle 4.2s ease-in-out infinite} .stepicon .spark{transform-origin:20px 5px;animation:spark 4.2s ease-in-out infinite} @keyframes inkdraw{0%,12%{stroke-dashoffset:14}38%,78%{stroke-dashoffset:0}100%{stroke-dashoffset:14}} @keyframes steam{0%,100%{opacity:.35;transform:translateY(1.2px)}50%{opacity:1;transform:translateY(-1.2px)}} @keyframes rays{0%,100%{opacity:.35}50%{opacity:1}} @keyframes bars{0%,100%{opacity:.4}45%{opacity:1}} @keyframes twinkle{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}} @keyframes spark{0%,72%,100%{opacity:0}82%{opacity:1}} .step h3{transition:color var(--t-fast) var(--ease)} .step{position:relative;transition:background var(--t-fast) var(--ease)} .step::before{ content:"";position:absolute;inset:0 -18px;z-index:-1;border-radius:14px;opacity:0; background:linear-gradient(90deg,color-mix(in srgb,var(--c) 16%,transparent),transparent 62%); transition:opacity var(--t) var(--ease);pointer-events:none; } .step h3{font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0;font-weight:600;font-size:19px;margin:0;letter-spacing:-.012em} .step p{margin:0;color:var(--ink-2);font-size:15.5px;max-width:64ch} @media (max-width:740px){ .step{grid-template-columns:46px minmax(0,1fr);gap:12px 16px} .step p{grid-column:2} } /* boundary list — a rule to the left says "this is a limit" */ .bounds{display:grid;grid-template-columns:1fr;gap:14px} .bounds div{position:relative;background:var(--layer-2);padding:26px 26px 26px 30px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .bounds div::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--g1),var(--g3))} .bounds h3{font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0;font-weight:600;font-size:17.5px;margin:0 0 9px} .bounds p{margin:0;font-size:14.5px;color:var(--ink-2)} .two{grid-template-columns:1fr} @media (min-width:820px){ .bounds,.two{grid-template-columns:repeat(2,minmax(0,1fr))} } /* portfolio */ .range{display:grid;grid-template-columns:repeat(auto-fit,minmax(278px,1fr));gap:14px} .range article{background:var(--layer-2);padding:28px 26px 30px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg)} .range p{margin:0 0 15px;font-size:14.5px;color:var(--ink-2)} .range ul{margin:0;padding:0;list-style:none;display:grid;gap:7px} .range li{font-size:13.5px;color:var(--muted);padding-left:23px;position:relative} .range li::before{ content:"";position:absolute;left:0;top:.46em;width:12px;height:10px; background:linear-gradient(110deg,var(--g1),var(--g3)); -webkit-mask:url("/assets/mark-mask.png") center/contain no-repeat; mask:url("/assets/mark-mask.png") center/contain no-repeat; } .ind{margin:18px 0 0;margin-top:auto;font-size:13.5px;color:var(--muted);padding-top:14px;border-top:1px solid var(--line-soft)} .ind b{color:var(--ink-2);font-weight:500} .path-cta{ margin-top:16px;padding-top:0;display:inline-flex;align-items:center;gap:7px; font-size:13.5px;font-weight:500;color:var(--accent);text-decoration:none; } .path-cta span{transition:transform var(--t) var(--ease)} /* kit table */ .kits{margin-top:32px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--layer-2);padding:28px clamp(20px,3vw,32px)} .kits-note{margin:0 0 22px;font-size:14.5px;color:var(--muted);max-width:72ch} .tscroll{overflow-x:auto} .kits table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:460px} .kits th,.kits td{text-align:left;padding:11px 16px 11px 0;border-bottom:1px solid var(--line-soft);vertical-align:top} .kits thead th{font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0;font-size:12.5px;letter-spacing:.01em;color:var(--accent);font-weight:600;border-bottom:1px solid var(--line)} .kits tbody th{font-weight:500;color:var(--ink);padding-right:30px} .kits tbody td{color:var(--ink-2)} .kits tbody tr:last-child th,.kits tbody tr:last-child td{border-bottom:0} /* patient-specific workflow — eight stages, read left to right like the rest of a process, not illustrated as a system diagram */ .psi-stages{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px} .psi-stages li{ display:flex;align-items:center;gap:10px;padding:13px 20px 13px 16px; background:var(--layer-2);border:1px solid var(--line);border-radius:999px; font-size:14.5px;color:var(--ink-2); transition:transform var(--t) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease); } .psi-stages b{ display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%; font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0;font-size:11.5px;font-weight:600; color:#fff;background:linear-gradient(135deg,var(--g1),var(--g3)); } @media (max-width:560px){ .psi-stages li{padding:11px 16px 11px 12px;font-size:13.5px} } /* chain of accountability */ .chain{list-style:none;margin:0;padding:0} .chain li{position:relative;padding:0 0 32px 36px;border-left:1px solid var(--line)} .chain li:last-child{border-left-color:transparent;padding-bottom:4px} .chain li::before{ content:"";position:absolute;left:-7px;top:6px;width:13px;height:13px;border-radius:50%; background:linear-gradient(135deg,var(--g1),var(--g3));box-shadow:0 0 0 5px var(--layer-1); } .chain-step{display:block;font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--accent);margin-bottom:8px} .chain h3{margin:0 0 8px} .chain p{margin:0;color:var(--ink-2);font-size:15.5px;max-width:72ch} .chain-foot{margin:6px 0 0;padding-left:36px;color:var(--muted);font-size:14.5px;max-width:72ch} @media (max-width:520px){ .chain li{padding-left:26px} .chain-foot{padding-left:26px} } /* component strip */ .parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:14px} .parts figure{ margin:0;background:var(--layer-3);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 20px 22px; display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px; } .parts .ph{height:150px;display:grid;place-items:center;width:100%} .parts img{max-height:150px;width:auto;filter:drop-shadow(0 12px 26px rgba(0,0,0,.55))} .parts figcaption{margin-top:4px;letter-spacing:.11em;color:var(--muted)} .growth{position:relative;margin-top:14px;border:1px solid var(--line);border-radius:var(--r-lg); background:var(--layer-2);padding:28px clamp(26px,3vw,38px);overflow:hidden} .growth::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--g1),var(--g3))} /* No measure on this one. It is one wide card rather than a column, so capping the line length left the text stopping well short of the right edge while the left sat tight against the padding — which reads as the card being misaligned rather than as a comfortable line length. */ .growth p{margin:0;color:var(--ink-2);font-size:15.5px} /* feature band */ .feature{position:relative;overflow:hidden;isolation:isolate;background:var(--layer-3);border-block:1px solid var(--line)} .feature::before{content:"";position:absolute;z-index:-1;right:-6%;top:-80%;width:86%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(201,60,255,.26),rgba(201,60,255,.08) 42%,rgba(201,60,255,0) 70%);pointer-events:none} .feature .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,6vw,76px);align-items:center;padding-block:clamp(50px,7vw,88px)} .feature h2{margin-bottom:18px} .feature p{color:var(--ink-2);margin:0 0 16px;max-width:52ch} .feature p:last-of-type{margin-bottom:0} .feature .shot{max-width:400px;margin-inline:auto} .feature .shot::before{display:none} @media (max-width:820px){ .feature .wrap{grid-template-columns:1fr} .feature .shot{max-width:280px} } /* generic 3/4-up card grid */ .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px} .grid div{background:var(--layer-2);padding:27px 25px;border:1px solid var(--line);border-radius:var(--r-lg)} .grid h3{font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0;font-weight:600;font-size:17.5px;margin:0 0 9px} .grid p{margin:0;font-size:14.5px;color:var(--ink-2)} /* commitment + signed statement */ .commit{ /* the one warm room in the building — amber and rose in place of the blues */ --g1:#ff7a4d; --g2:#ff5f9e; --g3:#d05cff; background:#241349; } .commit::before{background:radial-gradient(circle,rgba(255,122,77,.26),rgba(255,95,158,.14) 42%,rgba(255,95,158,0) 70%)} .commit .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,70px);align-items:start;padding-block:clamp(50px,7vw,88px)} .vows{display:grid;gap:12px;margin-top:28px} .vow{ position:relative;padding:17px 22px 18px 44px; background:linear-gradient(122deg,rgba(255,146,104,.05),rgba(255,255,255,.014) 70%); border:1px solid rgba(255,172,136,.13);border-radius:var(--r-lg); transition:transform var(--t) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease); } .vow>*{position:relative;z-index:1} .vow::after{ content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;opacity:0; pointer-events:none;transition:opacity var(--t) var(--ease); background:linear-gradient(118deg,rgba(59,70,245,.34),rgba(201,60,255,.30)); } .vow::before{z-index:2;transition:filter var(--t-slow) var(--ease),transform var(--t) var(--ease)} .vow::before{ content:"";position:absolute;left:19px;top:24px;width:12px;height:10px;opacity:.85; background:linear-gradient(110deg,var(--g1),var(--g3)); -webkit-mask:url("/assets/mark-mask.png") center/contain no-repeat; mask:url("/assets/mark-mask.png") center/contain no-repeat; } .vow h3{font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0;font-weight:600;font-size:18px;margin:0 0 6px;letter-spacing:-.012em;color:#f6e7de} .vow p{margin:0;font-size:14.8px;color:#cfc2d8;max-width:52ch} .note{background:var(--layer-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,3vw,36px)} .note p{margin:0 0 16px;color:var(--ink-2);font-size:16px} .note p:first-child{font-size:17.5px;color:var(--ink)} .sig{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)} .sig b{display:block;font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0;font-style:italic;font-weight:400;font-size:27px;letter-spacing:-.01em;color:var(--ink)} .sig span{display:block;margin-top:5px;font-size:13.5px;color:var(--faint)} /* The founder's statement is a card and nothing more — it used to turn over to a photograph, which made the one piece of plain writing on the page into something to be played with. Now it only lifts: a few pixels up and a fraction of a degree out of square, enough to register under the cursor and not enough to be a trick. */ .note-flip{-webkit-tap-highlight-color:transparent} .note-flip .note{ will-change:transform; transition:transform var(--t-slow) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t-fast) var(--ease); } @media (prefers-reduced-motion:reduce){ }@media (prefers-reduced-motion:reduce) and (hover:hover) and (pointer:fine){.note-flip:hover .note{transform:none}} @media (max-width:840px){ .commit .wrap{grid-template-columns:1fr} } /* .portrait{width:100%;height:auto;margin-bottom:22px;filter:grayscale(.15) contrast(1.04)} */ /* the photograph slot — deliberately marked, meant to be replaced */ .human{display:grid;gap:16px} .portrait{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line);filter:contrast(1.03) saturate(.96)} .scene{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line); transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t) var(--ease)} .scene svg{width:100%;height:auto;display:block; filter:saturate(.82) brightness(.96);transition:filter var(--t-slow) var(--ease)} /* restrained on hover: it sits directly above the statement card, and the two competing for attention was the problem */ .scene svg{transform-origin:50% 60%;will-change:transform,filter;backface-visibility:hidden;transition:filter var(--t-slow) var(--ease),transform var(--t) var(--ease)} /* the scene is alive at rest: the lamp breathes, the traces draw, the drip falls */ .scene .lampwash{animation:lampPulse 6.5s ease-in-out infinite} .scene .cone{animation:conePulse 6.5s ease-in-out infinite} .scene .cell{animation:cellPulse 6.5s ease-in-out infinite;animation-delay:var(--d,0s)} .scene .sheen{animation:sheenPulse 6.5s ease-in-out infinite} .scene .trace{stroke-dasharray:260;stroke-dashoffset:260;animation:draw 5s ease-in-out infinite} .scene .trace2{animation-delay:1.4s} .scene .drip{animation:drip 3.4s cubic-bezier(.5,0,.85,.6) infinite} @keyframes lampPulse{0%,100%{opacity:.8}50%{opacity:1}} @keyframes conePulse{0%,100%{opacity:.78}50%{opacity:1}} @keyframes cellPulse{0%,100%{opacity:.62}50%{opacity:1}} @keyframes sheenPulse{0%,100%{opacity:.5}50%{opacity:1}} @keyframes draw{ 0%{stroke-dashoffset:260} 45%{stroke-dashoffset:0} 80%{stroke-dashoffset:0;opacity:.75} 100%{stroke-dashoffset:-260;opacity:.2} } @keyframes drip{0%{transform:translateY(0);opacity:0}12%{opacity:.9}70%{transform:translateY(48px);opacity:.9}86%,100%{transform:translateY(52px);opacity:0}} /* motion — a load-in for the hero, a slow turn on the dial, lift on hover. Nothing waits on a scroll observer, so the page is complete at rest. */ @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @keyframes turn{to{transform:rotate(360deg)}} @keyframes glow{0%,100%{opacity:.85}50%{opacity:1}} .hero .eyebrow,.hero h1,.hero .lede,.hero .actions,.dial-feature .shot{ animation:rise .62s cubic-bezier(.2,.7,.3,1) both; } .hero .eyebrow{animation-delay:.04s} .hero h1{animation-delay:.10s} .hero .lede{animation-delay:.18s} .hero .actions{animation-delay:.26s} .dial-feature .shot{animation-delay:.16s} .stage::after{animation:turn 120s linear infinite;transform-origin:50% 50%} .stage::before{animation:glow 7s ease-in-out infinite} .range article,.grid div,.parts figure,.sidecard,.kits{ transition:transform var(--t) var(--ease),border-color var(--t-fast) var(--ease); } /* every card lifts, including the two that had the transition declared but no hover to trigger it — the kit table and the side panel */ /* ── the closing statements ───────────────────────────────────────────── Three different places on the page: the note that ends the portfolio, the four limits the company sets itself, and the line that ends the about section. Different sections, but the same kind of thing — a position being taken rather than information being listed — and they already share the rule down their left edge, which is what marks them out. So the rule is what moves. It widens and brightens, the card lifts, and a little of its colour bleeds in from that edge, as though the statement is being underlined rather than the card being picked up. Everything else on the page lifts and stops; these three do one thing more, together. */ .bounds div,.growth,.about .close{ transition:transform var(--t) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t) var(--ease); } .bounds div::before,.growth::before,.about .close::before{ transition:width var(--t) var(--ease),filter var(--t) var(--ease); } .parts img{backface-visibility:hidden;transition:transform var(--t) var(--ease)} .chain li::before{transition:box-shadow var(--t-fast) var(--ease)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} } /* one pointer everywhere, filled with the brand ramp — only where there is a real cursor, so touch and assistive setups are untouched. */ @media (hover:hover) and (pointer:fine){ /* the fallback used to be "auto", which lets the browser fall back to its own contextual choice — over any selectable body text (every paragraph and heading on the site) that resolves to the native text-select "I" beam, replacing the custom cursor the instant the pointer is over copy rather than a link. "default" pins it to the plain arrow everywhere except the inputs explicitly given a text cursor below, so the custom cursor never gets silently swapped out. */ body{cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACuklEQVR42q2TS0hUURzGv3POPfc1Mw4zzehYipojljUtkokyehhZYa7CoiKCIojIolZBURFRtGoZLYqgKI02rey1iAgShALJXARCL3qXOdPo3Ln3ntPCa2aOjoXf2ZzFOb//9z/f/wBjUgAyumeYIcX9es3KsQJjFf5VPp8WP1NevOOFyqJDOp+z02PR/4IGg4mQxkq+bFjSK5fNv5bhNGxprOQ0Ib87p9NleQepBOQ3aqdFomyH2biww+VK4BhDoD0ePlAEQEz3XX9XliCKKglF1kV1qMloWdRphXx1W/oHrtyNFjVWA3C9d50eEABUSWBKBlhpxPQavTXR6cwNb0x+TXc/CGoLVgNwCoU1AahLwAAHtYfhJ361tbYDydKDs1P2m9smr9hNQBwPSAq0DKgC0ASgC8CQDNyxwVxLaak8y5srz6s5kbkIEjpHQIV3hRR0aAhAk2QELBkMQcEc0LWxPcbeefecWXrFEa5E2qPRVf58TscDPXeaEB6QgLk20sP97ofUSxGgAa159omUwcJbfw683JUv/XGpqSDgUkAhBgDAlQ5UEHn5VVv67XBPDlIKhaqUQvksQZ567sSkDilsRFWK15mu7PXX+wdVAoS4QRoi2/w5d/B7SK9qcqls+Gn/qM8675941/IDBYQb4SXoG+zOXujfLru+XhUfhnpslUgsD21CsVFb/SnTW2VZb/uB7ynPnfw7FAYAlpXVfTx4iILq7e9OajmROS5k7r0kItkQapEmU2lO2Ox56n5kc93Rm31fHk1w9qcIAMVUK28wFvmmKrHDBAQmL633qZXpS4s/Wg9XSPdU3eMhnZdZPj43Ueh/j8auRM1kbHQvpSSEBO+sKd4n18XaHJOX2yYvvzULtYGpBnuyYWcAEDDiSwkNPwPMdo2Vrs9jYkqR/JM/smZK9G/XhfQLRE/ppaetrwwAAAAASUVORK5CYII=") 2 2,default} a,button,summary,[role="button"],.btn,.scene,.vow,.pillar,.range article,.parts figure,.step, .standard-card,.tenet,.gt-node,.handoff-link,.card-grid-item,.flow-step{ cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACuklEQVR42q2TS0hUURzGv3POPfc1Mw4zzehYipojljUtkokyehhZYa7CoiKCIojIolZBURFRtGoZLYqgKI02rey1iAgShALJXARCL3qXOdPo3Ln3ntPCa2aOjoXf2ZzFOb//9z/f/wBjUgAyumeYIcX9es3KsQJjFf5VPp8WP1NevOOFyqJDOp+z02PR/4IGg4mQxkq+bFjSK5fNv5bhNGxprOQ0Ib87p9NleQepBOQ3aqdFomyH2biww+VK4BhDoD0ePlAEQEz3XX9XliCKKglF1kV1qMloWdRphXx1W/oHrtyNFjVWA3C9d50eEABUSWBKBlhpxPQavTXR6cwNb0x+TXc/CGoLVgNwCoU1AahLwAAHtYfhJ361tbYDydKDs1P2m9smr9hNQBwPSAq0DKgC0ASgC8CQDNyxwVxLaak8y5srz6s5kbkIEjpHQIV3hRR0aAhAk2QELBkMQcEc0LWxPcbeefecWXrFEa5E2qPRVf58TscDPXeaEB6QgLk20sP97ofUSxGgAa159omUwcJbfw683JUv/XGpqSDgUkAhBgDAlQ5UEHn5VVv67XBPDlIKhaqUQvksQZ567sSkDilsRFWK15mu7PXX+wdVAoS4QRoi2/w5d/B7SK9qcqls+Gn/qM8675941/IDBYQb4SXoG+zOXujfLru+XhUfhnpslUgsD21CsVFb/SnTW2VZb/uB7ynPnfw7FAYAlpXVfTx4iILq7e9OajmROS5k7r0kItkQapEmU2lO2Ox56n5kc93Rm31fHk1w9qcIAMVUK28wFvmmKrHDBAQmL633qZXpS4s/Wg9XSPdU3eMhnZdZPj43Ueh/j8auRM1kbHQvpSSEBO+sKd4n18XaHJOX2yYvvzULtYGpBnuyYWcAEDDiSwkNPwPMdo2Vrs9jYkqR/JM/smZK9G/XhfQLRE/ppaetrwwAAAAASUVORK5CYII=") 2 2,pointer; } /* text inputs used to fall back to the browser's own black/white I-beam here ("cursor:text" with no image) — a different, unbranded cursor state that read as a leftover default rather than a deliberate one. This is the same custom-cursor treatment as the rest of the page, just drawn as a caret instead of an arrow, so every interactive surface uses one consistent, branded pointer family. */ input,textarea,select{ cursor:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAWCAYAAAD0OH0aAAAAWklEQVR4nGNgoDVghDGiqv//J6R4WSsjIxPZNiCDmAqEbUs6GFHUsGDTwPwXtw3YNfwjUQMTyTbQ3Ekk20C6H2juJNL9MPichC+U4Em3OZhwBqpdS0YGIhkAAM2MGkLqdv35AAAAAElFTkSuQmCC") 6 11,text; } } /* the records grid holds four blocks of uneven copy — two across, equal heights and a numbered rail keep it from reading lopsided. (.grid is declared later than .two, so this needs the extra specificity) */ @media (min-width:800px){ .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))} } .records div{position:relative;padding-left:58px;display:flex;flex-direction:column;justify-content:flex-start} .records div::before{ counter-increment:rec;content:counter(rec,decimal-leading-zero); position:absolute;left:24px;top:27px; font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0; font-size:13px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums; } .records div::after{ content:"";position:absolute;left:25px;top:52px;bottom:26px;width:2px;border-radius:2px; background:linear-gradient(180deg,var(--g2),transparent);opacity:.45; } .records{counter-reset:rec} @media (max-width:560px){ .records div{padding-left:48px} .records div::before{left:20px} .records div::after{left:21px} } /* images fade up as they decode. The class is added by script, so with no script the images simply render — nothing is parked invisible. */ .fade-img{opacity:0} .fade-img.is-in{opacity:1} .fade-img{transition:opacity var(--t-slow) var(--ease)} /* about */ .about{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(26px,5vw,62px);align-items:start} .about p{margin:0 0 16px;color:var(--ink-2);max-width:60ch} .about p:last-child{margin-bottom:0} .about .lead{font-size:18.5px;color:var(--ink);max-width:56ch} .about .close{ position:relative;margin-top:26px;padding:20px 24px 20px 26px; font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0;font-style:italic; font-size:18px;line-height:1.5;color:var(--ink);max-width:56ch; background:linear-gradient(122deg,rgba(255,146,104,.05),rgba(255,255,255,.014) 70%); border:1px solid rgba(255,172,136,.13);border-radius:var(--r-lg);overflow:hidden; } .about .close::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--g1),var(--g3))} .sidecard{position:relative;overflow:hidden} .sidecard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--g1),var(--g2) 55%,var(--g3))} .sidecard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--layer-2);padding:28px} .sidecard dl{display:grid;gap:17px;margin:0} .sidecard dt{font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0;font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--accent);margin-bottom:5px} .sidecard dd{margin:0;font-size:15px} @media (max-width:780px){ .about{grid-template-columns:1fr} } /* the HCP acknowledgement gate — native
, so it needs no script and is keyboard-operable for free; the professional content sits inside it rather than behind a page a general visitor would otherwise land on */ .hcp-gate{ border:1px solid var(--line);border-radius:var(--r-lg);background:var(--layer-2); padding:6px clamp(20px,3vw,30px);overflow:hidden; } .hcp-gate summary{ list-style:none;cursor:pointer;padding:22px 4px;display:flex;align-items:center; justify-content:space-between;gap:16px;font-family:var(--display); font-variation-settings:"SOFT" 0,"WONK" 0;font-weight:600;font-size:17px; } .hcp-gate summary::-webkit-details-marker{display:none} .hcp-gate summary span{color:var(--accent);transition:transform var(--t) var(--ease);flex:none} .hcp-gate[open] summary span{transform:rotate(90deg)} .hcp-body{padding:6px 4px 28px;border-top:1px solid var(--line-soft);margin-top:2px} .hcp-body .grid{margin-top:20px} .hcp-sec .grid div{background:var(--layer-3)} /* contact */ .band{position:relative;overflow:hidden;isolation:isolate;background:var(--layer-3);border-top:1px solid var(--line)} .band::before{content:"";position:absolute;z-index:-1;left:-10%;top:-66%;width:58%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(59,70,245,.34),rgba(59,70,245,0) 64%);pointer-events:none} /* the same wing-mark signature as the .phero bands and the footer, tucked into the opposite (bottom-right) corner here so the closing CTA band reads as another quiet instance of the same brand device, not a one-off */ .band::after{ content:"";position:absolute;z-index:-1;pointer-events:none; right:-8%;bottom:-58%;width:44%;aspect-ratio:1; background:linear-gradient(160deg,var(--g1),var(--g2) 55%,var(--g3)); opacity:.06; -webkit-mask:url("/assets/mark-mask.png") center/contain no-repeat; mask:url("/assets/mark-mask.png") center/contain no-repeat; } .band-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:clamp(28px,6vw,76px);align-items:start} .band dl{margin:0;display:grid;gap:19px} .band dt{font-family:var(--display);font-variation-settings:"SOFT" 0,"WONK" 0;font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--accent);margin-bottom:5px} .band dd{margin:0;font-size:16px} .band dd a{text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px; transition:color var(--t-fast) var(--ease)} @media (max-width:720px){ .band-grid{grid-template-columns:1fr} } .path-routes{display:grid;gap:10px;margin:28px 0 22px} .path-route{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 20px;background:rgba(255,255,255,.03);border:1px solid var(--line); border-radius:var(--r-md);text-decoration:none;color:var(--ink);font-size:15px;font-weight:500; transition:transform var(--t) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease); } .path-route span{transition:transform var(--t) var(--ease);color:var(--accent)} .notice{ font-size:13.5px;color:var(--muted);max-width:56ch;margin:0 0 26px;padding:14px 18px; background:rgba(255,255,255,.03);border:1px solid var(--line-soft);border-radius:var(--r-sm); } .consent-note{font-size:13px;color:var(--faint);max-width:56ch;margin:16px 0 0} footer{background:var(--base);border-top:1px solid var(--line);color:var(--faint)} footer .wrap{padding-block:28px;display:flex;flex-wrap:wrap;gap:18px 30px;justify-content:space-between;align-items:center;font-size:13px} footer p{margin:0;max-width:64ch} .foot-nav{display:flex;flex-wrap:wrap;gap:10px 22px} .foot-nav a:not(.logo){font-size:13px;color:var(--muted);text-decoration:none;transition:color var(--t-fast) var(--ease)} /* ── motion ──────────────────────────────────────────────────────────────── One language for the whole page, so the movement reads as a system rather than as a collection of effects. Arriving: everything of substance rises sixteen pixels into place on one curve, staggered within its own group. The class that hides it is added by script and only then, so a page with no script — or one where the observer never fires — simply shows everything. Nothing is ever parked invisible by the stylesheet itself. Responding: a gradient rule wipes in under any link, cards lift, and anything that can be pressed moves on the same two durations. Sections people are meant to work through — the sequence, the feature, the commitments — carry a little more than the ones they only read. */ /* The arrival moves `translate`, not `transform`. It used `transform` first, and that quietly broke every hover on the page that lifts a card. `.rise.seen` sets the transform back to none, it has the same specificity as `.pillar:hover`, and it is declared later — so it won, and the cards stopped moving under the cursor. `translate` is its own property and composes with `transform` rather than replacing it, so the two never meet. */ .rise{ opacity:0;translate:0 16px; transition:opacity var(--t-reveal) var(--ease-reveal) var(--d,0s), translate var(--t-reveal) var(--ease-reveal) var(--d,0s); } .rise.seen{opacity:1;translate:0 0} /* links: one underline, wiping from the left, everywhere */ nav a:not(.btn),.band dd a,footer .logo{position:relative} nav a:not(.btn)::after,.band dd a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;border-radius:2px; background:linear-gradient(90deg,var(--g1),var(--g2) 55%,var(--g3)); transform:scaleX(0);transform-origin:left center; transition:transform var(--t) var(--ease); } nav a:not(.btn):focus-visible::after,.band dd a:focus-visible::after{transform:scaleX(1)} /* headings inside anything hoverable warm toward the accent, at one speed */ /* the pillars are left out of this: they carry their own colour from the picture above them, set where they are defined */ .range article h3,.grid div h3,.bounds h3,.parts figcaption,.chain h3{ transition:color var(--t-fast) var(--ease); } /* the sequence: the rail's accent grows out of the icon on hover */ .step .stepicon::after{ content:"";position:absolute;left:50%;top:100%;width:2px;height:0;border-radius:2px; background:linear-gradient(180deg,var(--c,var(--accent)),transparent); transform:translateX(-50%);opacity:0; transition:height var(--t-slow) var(--ease),opacity var(--t-fast) var(--ease); } /* The cranial render breathes, on `translate` rather than on `transform`. This is why it had stopped lifting under the cursor. Every render on the page grows from .925 to 1 on hover, which is a `transform` — and a running animation on that same property outranks it, so the keyframes simply won and the scale never applied. `translate` is its own property and composes with `transform` instead of replacing it, so the float and the lift can both happen. It settles while the cursor is on it, so the hover is a lift and not a lift on top of a drift. */ .feature .stage>img{animation:float 9s ease-in-out infinite} @keyframes float{0%,100%{translate:0 -4px}50%{translate:0 4px}} /* the commitments fill from the left rather than all at once */ .vow::after{transform-origin:left center} .vow h3,.vow p{transition:transform var(--t) var(--ease)} @media (prefers-reduced-motion:reduce){ .rise{opacity:1;translate:none;transition:none} .feature .stage>img{animation:none} } /* ── phones ──────────────────────────────────────────────────────────────── Two things change on a touch screen. The kit table stops being a table, because a two-column table on a 390px screen either scrolls sideways (which people do not discover) or truncates mid-word. And everything the desktop reveals on hover has to arrive some other way, since there is no hover: the states below are switched on by an observer as each block scrolls into view. */ @media (max-width:640px){ /* the table becomes a list: each procedure, then what its kit carries */ .kits table{min-width:0;display:block} .kits thead{display:none} .kits tbody,.kits tr,.kits th,.kits td{display:block;width:auto} .kits tr{padding:14px 0;border-bottom:1px solid var(--line-soft)} .kits tr:last-child{border-bottom:0} .kits th,.kits td{border-bottom:0;padding:0} .kits tbody th{font-size:15.5px;margin-bottom:5px;padding-right:0} .kits tbody td{font-size:14.5px;color:var(--muted)} .tscroll{overflow-x:visible} /* small print that was borderline at arm's length */ .kits tbody td,.kits thead th,.band dt,.sidecard dt{font-size:14px} .tag,.chain-step{font-size:13.5px} /* the masthead's own nav scroll/tap-target treatment now lives at the 940px breakpoint above, so it applies from tablet down rather than only below 640px — see the comment there. */ } /* Touch's full hover mirror — every element that had a :hover effect, not just these four — now lives in one generated block further down (search "Touch equivalent"), driven by initHoverMirror() in main.js. This hand-written subset predated that and is superseded by it. */ /* ============================================================ Vertevance Precision Field — amendment layer Extends base-extract.css (unchanged) rather than replacing it. New tokens, the coral accent, bone-white sections, breadcrumbs, the theatre-boundaries composition, the accountability panel, forms, the resource library, 404, and route navigation. ============================================================ */ :root{ /* named motion tokens from the amendment, aliased onto the existing duration/ease pairs so every hover on the site still moves as one system */ --motion-fast:var(--t-fast); --motion-base:var(--t); --motion-slow:var(--t-slow); --motion-ambient:120s; --ease-standard:var(--ease); --ease-emphasis:var(--ease-reveal); --lift-small:4px; --focus-ring:0 0 0 3px rgba(184,132,255,.34); --warm-1:#e8a94e; --warm-2:#f0795f; --warm-3:#c93cff; /* coral — human accountability and escalation: boundaries, contact, complaints */ --coral:#f0795f; --coral-2:#f0795f; /* bone-white — used sparingly, for one or two trust-heavy sections */ --bone:#f4efe6; --bone-ink:#241a3d; --bone-muted:#5c4f78; --bone-line:rgba(36,26,61,.12); } /* ---------- professional-use bar + breadcrumb rail ---------- */ .crumbs{background:var(--layer-1);border-bottom:1px solid var(--line-soft)} .crumbs .wrap{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-block:12px;font-size:12.5px;color:var(--muted)} .crumbs a{color:var(--ink-2);text-decoration:none;transition:color var(--motion-fast) var(--ease-standard)} .crumbs span.sep{color:var(--faint);opacity:.6} .crumbs span.here{color:var(--ink)} /* active nav indicator — a fine gradient underline rather than a solid pill */ nav a:not(.btn){position:relative} nav a.is-active:not(.btn){color:var(--ink)} nav a.is-active:not(.btn)::after{ content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--g1),var(--g3)); } /* section divider — a lone glyph floating in open space read as unstyled rather than intentional ("the >> isn't working"). Flanking it with two short gradient rules gives it something to belong to, so it reads as a deliberate, quiet transition between chapters instead of a stray icon; a slow opacity breathe keeps it from being totally static without calling attention to itself the way the travelling card-bars do. */ .chevron-div{ display:flex;align-items:center;justify-content:center;gap:14px; padding-block:clamp(28px,4vw,44px);color:var(--faint); } .chevron-div::before,.chevron-div::after{ content:"";height:1px;flex:1 1 auto;max-width:180px; background:linear-gradient(90deg,transparent,var(--line-soft)); } .chevron-div::after{background:linear-gradient(90deg,var(--line-soft),transparent)} .chevron-div svg{ width:13px;height:13px;flex:none;stroke:var(--accent);fill:none; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; animation:chevronBreathe 5s ease-in-out infinite; } @keyframes chevronBreathe{ 0%,100%{opacity:.55;transform:translateX(0)} 50% {opacity:1;transform:translateX(2px)} } @media (prefers-reduced-motion:reduce){ .chevron-div svg{animation:none;opacity:.8} } /* page hero — shorter than the home hero, used on every interior route */ .phero{position:relative;overflow:hidden;isolation:isolate;background:var(--base);border-bottom:1px solid var(--line-soft)} /* two lights, not one: the brand bloom top-right and a warm counterpart lower-left, both on the same unmasked layer so the warmth actually shows (the grid layer below fades out toward the bottom, which is exactly where a warm accent kept ending up invisible) and both drift together with the page's existing ambient-motion system */ .phero::before{ content:"";position:absolute;inset:0;z-index:-1; /* a diagonal "sheen" layer used to ride across this in its own animation — pulled per feedback: at that size and diagonal it swept straight across the heading and body copy on every cycle, reading as a highlight sitting on the text rather than a background effect. The two blooms below still drift (ambientDriftA, on the whole element), and the mark motif and grid carry the rest of the movement. */ background: radial-gradient(46% 90% at 88% -10%,rgba(201,60,255,.27),transparent 62%), radial-gradient(52% 88% at 6% 96%,rgba(255,138,76,.27),transparent 63%); } .phero .wrap{padding-block:clamp(40px,6vw,72px) clamp(34px,5vw,56px)} .phero .eyebrow{margin-bottom:14px} .phero h1{font-size:clamp(28px,3.8vw,44px);margin-bottom:16px} .phero .lede{margin-bottom:0} /* ---------- clinical-focus pathway switcher (Cervical / Thoracolumbar / Cranial / Patient-specific) ---------- Landing on one of these four pages used to give no sense of the other three short of scrolling to "Related pathways" at the very bottom. A small segmented switcher right in the band answers "which one am I on, and how do I reach the others" as soon as the page opens. */ .pw-tabs{ display:flex;flex-wrap:wrap;gap:4px;margin:0 0 22px; padding:4px;width:fit-content;max-width:100%; background:rgba(255,255,255,.03);border:1px solid var(--line-soft);border-radius:999px; } .pw-tabs a{ padding:8px 17px;border-radius:999px;font-size:13.5px;font-weight:500; color:var(--ink-2);text-decoration:none;white-space:nowrap; transition:background var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard); } .pw-tabs a.is-active{ color:#fff; background:linear-gradient(100deg,var(--g1),var(--g2) 56%,var(--g3)); box-shadow:0 8px 20px -12px rgba(201,60,255,.7); } /* .pw-tabs is a real