:root {
--sidebar-w: 0px;
}
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
background: var(--black);
color: var(--cream);
font-family: 'Arimo', sans-serif;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
/* Grain texture */
body::before {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none; z-index: 9999; mix-blend-mode: overlay;
}
/* ── Loader ── */
#loader {
position: fixed; inset: 0; background: var(--black); z-index: 10000;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.5s var(--ease), visibility 0.5s;
}
#loader.done { opacity: 0; visibility: hidden; }
/* Solenic mark loader: three brand rings reveal into place, red dot heartbeat. */
.sol-loader { position: relative; width: 110px; height: 110px; }
.sol-ring {
position: absolute; inset: 0; margin: auto;
width: 80px; height: 80px; border-radius: 50%;
border: 3.5px solid transparent; opacity: 0;
will-change: transform, opacity; transform: translateZ(0); backface-visibility: hidden;
}
/* Colors only. The reveal is gated behind #loader.play so JS can start it on a clean frame
(after the page's heavy init), keeping the compositor jank-free under load. */
.sol-ring.s2 { border-color: var(--amber); border-right-color: transparent; }
.sol-ring.s1 { border-color: #e9c9a0; border-right-color: transparent; }
.sol-ring.s3 { border-color: #a04d18; border-right-color: transparent; }
/* Beat 1: center ring fades in. Beat 2: the two side rings — already solid — slide out symmetrically into place. */
#loader.play .sol-ring.s2 { animation: solRingC 0.45s ease-out 0s forwards; }
#loader.play .sol-ring.s1 { animation: solRingL 1.02s cubic-bezier(.16,.72,.3,1) 0.4s forwards; }
#loader.play .sol-ring.s3 { animation: solRingR 1.02s cubic-bezier(.16,.72,.3,1) 0.4s forwards; }
.sol-dot {
position: absolute; inset: 0; margin: auto;
width: 9px; height: 9px; border-radius: 50%; background: var(--red);
opacity: 0; will-change: transform, opacity; transform: translateZ(0); backface-visibility: hidden;
}
#loader.play .sol-dot { animation: solDotIn 0.4s ease-out 1.39s forwards, solBeat 2.8s ease-in-out 2.4s infinite; }
/* pure fade + slide (no scale/rotate) so the ring borders never re-rasterize — buttery on the compositor.
Side rings reach full opacity by 35% then keep sliding, so you see a solid ring glide into place. */
@keyframes solRingC { from { opacity: 0; } to { opacity: 1; } }
@keyframes solRingL { 0% { opacity: 0; transform: translate3d(0,0,0); } 35% { opacity: 1; } 100% { opacity: 1; transform: translate3d(-24px,0,0); } }
@keyframes solRingR { 0% { opacity: 0; transform: translate3d(0,0,0); } 35% { opacity: 1; } 100% { opacity: 1; transform: translate3d(24px,0,0); } }
@keyframes solDotIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes solBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) {
#loader .sol-ring, #loader .sol-dot { animation: none !important; opacity: 1 !important; }
#loader .sol-ring.s1 { transform: translateX(-24px); }
#loader .sol-ring.s3 { transform: translateX(24px); }
}
/* ── Sidebar ── */
.sidebar {
position: fixed; top: 0; left: 0;
width: var(--sidebar-w); height: 100vh;
background: var(--coal);
border-right: 1px solid rgba(245,239,230,0.16);
display: flex; flex-direction: column;
z-index: 200; transition: transform 0.55s var(--ease);
}
.sidebar::before {
content: ''; position: absolute; top: -80px; left: -80px;
width: 260px; height: 260px;
background: radial-gradient(circle, rgba(224,128,48,0.1) 0%, transparent 70%);
pointer-events: none;
}
body.nav-closed .sidebar { transform: translateX(-100%); }
.sidebar-logo { padding: 36px 28px 28px; border-bottom: 1px solid rgba(245,239,230,0.16); }
.sidebar-logo .logo-image {
display: block;
width: 200px;
max-width: 100%;
height: auto;
}
.sidebar-nav { flex: 1; padding: 32px 0; }
.sidebar-nav ul { list-style: none; }
.sidebar-nav a {
display: flex; align-items: center; gap: 12px;
padding: 13px 28px;
font-family: 'Space Mono', monospace; font-size: 10px;
letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(245,239,230,0.9);
transition: color 0.3s, padding-left 0.3s, background 0.3s;
}
.sidebar-nav a::before {
content: ''; width: 0; height: 1px; background: var(--cream);
transition: width 0.3s var(--ease); flex-shrink: 0;
}
.sidebar-nav a:hover { color: var(--white); padding-left: 38px; background: rgba(224,128,48,0.35); }
.sidebar-nav li.active a { color: var(--amber); padding-left: 38px; }
.sidebar-nav a:hover::before, .sidebar-nav li.active a::before { width: 18px; }
.sidebar-nav li.active a { color: var(--amber); }
/* Sub-nav (Resources children) */
.sidebar-nav li.has-sub > ul.sub-nav {
list-style: none; padding: 0;
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height 0.4s var(--ease), opacity 0.35s var(--ease);
}
.sidebar-nav li.has-sub.sub-open > ul.sub-nav {
max-height: 180px; opacity: 1;
}
.sidebar-nav .sub-item a {
padding: 8px 28px 8px 48px;
font-size: 9px; letter-spacing: 0.12em;
color: rgba(245,239,230,0.55);
}
.sidebar-nav .sub-item a::before { display: none; }
.sidebar-nav .sub-item a:hover {
color: var(--white); padding-left: 58px;
background: rgba(224,128,48,0.2);
}
.sidebar-nav .sub-item.active a {
color: var(--amber); padding-left: 58px;
}
.sidebar-foot { padding: 24px 28px; border-top: 1px solid rgba(245,239,230,0.16); }
.sidebar-socials { display: flex; gap: 18px; }
.sidebar-socials a {
font-size: 13px; color: rgba(245,239,230,0.65);
transition: color 0.3s, transform 0.3s;
}
.sidebar-socials a:hover { color: var(--amber); transform: translateY(-3px); }
.sidebar-copy {
margin-top: 14px; font-family: 'Space Mono', monospace;
font-size: 9px; color: rgba(245,239,230,0.78); letter-spacing: 0.08em;
}
.sidebar-copy-glow {
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.16em;
animation: sidebarCopyGlow 2.4s ease-in-out infinite;
}
@keyframes sidebarCopyGlow {
0%, 100% {
color: rgba(224,128,48,0.78);
text-shadow:
0 0 6px rgba(224,128,48,0.35),
0 0 14px rgba(224,128,48,0.18);
}
50% {
color: #ffa25a;
text-shadow:
0 0 10px rgba(224,128,48,0.85),
0 0 22px rgba(224,128,48,0.55),
0 0 36px rgba(224,128,48,0.3);
}
}
@media (prefers-reduced-motion: reduce) {
.sidebar-copy-glow {
animation: none;
color: var(--white);
text-shadow: 0 0 10px rgba(224,128,48,0.55);
}
}
/* ── Nav Toggle ── */
.nav-toggle {
position: fixed; top: 24px; left: 24px; z-index: 300;
width: 46px; height: 46px; background: var(--coal);
border: 1px solid rgba(224,128,48,0.25); border-radius: 50%;
cursor: pointer; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 5px;
transition: left 0.55s var(--ease), border-color 0.3s;
}
body:not(.nav-closed) .nav-toggle { left: calc(var(--sidebar-w) + 16px); }
.nav-toggle:hover { border-color: var(--amber); }
.nav-toggle span {
display: block; width: 18px; height: 1.5px; background: var(--amber);
transition: transform 0.35s var(--ease), opacity 0.35s, width 0.35s;
transform-origin: center;
}
@keyframes neon-blink {
0%, 100% {
box-shadow: 0 0 0 rgba(224,128,48,0), 0 0 0 rgba(224,128,48,0);
border-color: rgba(224,128,48,0.35);
}
50% {
box-shadow: 0 0 10px rgba(224,128,48,0.55), 0 0 22px rgba(224,128,48,0.4);
border-color: rgba(224,128,48,0.95);
}
}
@keyframes neon-line-blink {
0%, 100% {
background: var(--amber);
box-shadow: 0 0 0 rgba(224,128,48,0);
}
50% {
background: #ffa24f;
box-shadow: 0 0 8px rgba(224,128,48,0.9);
}
}
body.nav-closed .nav-toggle {
animation: neon-blink 1.3s ease-in-out infinite;
}
body.nav-closed .nav-toggle span {
animation: neon-line-blink 1.3s ease-in-out infinite;
}
body:not(.nav-closed) .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body:not(.nav-closed) .nav-toggle span:nth-child(2) { opacity: 0; width: 0; }
body:not(.nav-closed) .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* ── Carousel Wrapper ── */
.carousel-wrap {
position: fixed; top: 0; left: 0;
width: 100%; height: 100vh;
transition: padding-left 0.55s var(--ease);
}
body:not(.nav-closed) .carousel-wrap { padding-left: var(--sidebar-w); }
.sections-track {
position: relative; width: 100%; height: 100%; overflow: hidden;
}
/* ── Panels ── */
.panel {
position: absolute; inset: 0; width: 100%; height: 100%;
transform: translateY(100%); opacity: 0;
transition: transform 0.9s var(--ease), opacity 0.9s var(--ease);
pointer-events: none;
}
.panel.active { transform: translateY(0); opacity: 1; pointer-events: all; }
.panel.exit-up { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.panel.exit-down { transform: translateY(100%); opacity: 0; pointer-events: none; }
/* Jump (nav / footer / dots): fade out in place — no full-viewport slide. */
.panel.exit-fade { transform: translateY(0); opacity: 0; pointer-events: none; transition: opacity 0.42s var(--ease); }
/* ── Panel structure ── */
.panel-inner {
position: relative; width: 100%; height: 100%;
display: flex; align-items: center;
}
.panel-bg {
position: absolute;
inset: 0;
background-image: url("assets/Product%20images%20/SOLENIC%20Black%20Background.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.panel-overlay {
position: absolute; inset: 0;
background: linear-gradient(120deg, rgba(10,8,6,0.92) 0%, rgba(10,8,6,0.52) 55%, rgba(10,8,6,0.72) 100%);
}
/* Same ambient ring/coil/dot canvas as the About page background,
reused for the Resources and Investors panels. Sits between panel-bg
and panel-overlay so the existing scrim still lifts the panel copy. */
.panel-bg-canvas {
position: absolute; inset: 0;
width: 100%; height: 100%;
display: block;
pointer-events: none;
}
/* Clinical trials panel stock photography + readable overlay */
.panel-clinical-trials .panel-bg {
background-image: url("assets/images/online-marketing-hIgeoQjS_iE-unsplash.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.panel-clinical-trials .panel-overlay {
background: linear-gradient(
105deg,
rgba(10, 8, 6, 0.94) 0%,
rgba(10, 8, 6, 0.78) 42%,
rgba(10, 8, 6, 0.52) 72%,
rgba(10, 8, 6, 0.38) 100%
);
}
.panel-clinical-trials .panel-content {
filter: drop-shadow(0 14px 36px rgba(0,0,0,0.5));
width: 100%; /* flex item needs a real width or the form's 1fr/1fr grid collapses */
}
.panel-clinical-trials .clinical-enquiry-form,
.panel-clinical-trials .clinical-row { width: 100%; }
/* Panel content
─────────────────────────────────────────────────────────────────────────
max-width caps the BORDER box (solenic.base.css sets box-sizing:border-box
globally), so any inline padding is subtracted from it rather than added
outside it. With a flat `max-width: 560px` and a padding that grows with
the viewport, the usable column got NARROWER as the screen got WIDER: at
1920 the desktop rail computes to 324px, leaving 236px of a 560px box, and
"Where to find us" wrapped to three lines on a large display while reading
fine on a laptop.
So the measure and the rail are declared separately and the cap adds them
back. --pc-measure is the copy column the design wants and it is now a
constant at every viewport; --pc-inset is whatever rail that breakpoint
uses. Change either one here and every panel that uses .panel-content
follows — do not re-introduce a bare pixel max-width, and do not treat a
wrapping heading as a type-size problem. */
.panel-content {
--pc-measure: 560px; /* usable content width — constant */
--pc-inset: 72px; /* rail, one side */
position: relative; z-index: 2;
max-width: calc(var(--pc-measure) + var(--pc-inset) * 2);
padding: 0 var(--pc-inset);
display: flex; flex-direction: column; justify-content: center;
height: 100%;
}
/* Staggered reveal animations when panel activates */
.panel-eyebrow {
font-family: 'Space Mono', monospace; font-size: 1rem;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--white);
margin-bottom: 20px; display: flex; align-items: center; gap: 14px;
opacity: 0; transform: translateX(-20px);
transition: opacity 0.6s 0.35s var(--ease), transform 0.6s 0.35s var(--ease);
}
.panel-eyebrow::before {
content: ''; display: block; width: 28px; height: 1px; background: var(--amber);
}
.panel.active .panel-eyebrow { opacity: 1; transform: translateX(0); }
.panel-title {
font-size: clamp(3rem, 5.5vw, 5.5rem); font-weight: 300;
line-height: 1.02; letter-spacing: -0.025em; color: var(--white);
margin-bottom: 22px;
opacity: 0; transform: translateY(28px);
transition: opacity 0.7s 0.5s var(--ease), transform 0.7s 0.5s var(--ease);
}
.panel-title em { font-style: italic; color: var(--sand); }
.panel.active .panel-title { opacity: 1; transform: translateY(0); }
.panel-credibility {
font-size: 1rem;
letter-spacing: 0.06em;
color: var(--white);
opacity: 1;
margin-bottom: 36px;
text-transform: uppercase;
}
.panel-body {
font-size: clamp(0.9rem, 1.3vw, 1.1rem); line-height: 1.6; color: rgba(245,239,230,0.95);
max-width: 400px; margin-bottom: 38px;
opacity: 0; transform: translateY(20px);
transition: opacity 0.6s 0.65s var(--ease), transform 0.6s 0.65s var(--ease);
}
.panel.active .panel-body { opacity: 1; transform: translateY(0); }
.panel-cta {
display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
font-family: 'Space Mono', monospace; font-size: 9px;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--white); border: 1px solid rgba(224,128,48,0.4);
padding: 15px 26px; border-radius: 2px;
opacity: 0; transform: translateY(16px);
transition: opacity 0.6s 0.8s var(--ease), transform 0.6s 0.8s var(--ease),
background 0.3s, color 0.3s, border-color 0.3s;
}
.panel.active .panel-cta { opacity: 1; transform: translateY(0); }
.panel-cta:hover { background: var(--amber); color: var(--black); border-color: var(--amber); }
button.panel-cta {
cursor: pointer;
font-family: 'Space Mono', monospace;
background: transparent;
}
.panel-about .about-photo-fill {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background-image: url("assets/Product images /TEAM /iStock-2227587490.webp");
background-size: cover;
background-position: center;
opacity: 1;
transform: scale(1);
transition: transform 0.55s var(--ease);
}
.panel-about .panel-inner::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(105deg, rgba(10,8,6,0.88) 0%, rgba(10,8,6,0.62) 42%, rgba(10,8,6,0.35) 68%, rgba(10,8,6,0.22) 100%);
opacity: 1;
transition: opacity 0.45s var(--ease);
}
.panel-about .panel-content {
z-index: 3;
filter: drop-shadow(0 14px 34px rgba(0,0,0,0.6));
}
/* Brighten background (lift dark overlay) when engaging with the CTA */
.panel-about:has(.panel-cta:hover) .about-photo-fill,
.panel-about:has(.panel-cta:focus-visible) .about-photo-fill {
transform: scale(1.02);
}
.panel-about:has(.panel-cta:hover) .panel-inner::after,
.panel-about:has(.panel-cta:focus-visible) .panel-inner::after {
opacity: 0.38;
}
/* Home hero layered carousel */
/* The hero is one composition now — the two-slide carousel was removed per client V3
(2026-07-25) and the video moved to its own panel. */
.hero-intro {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 72px;
background:
linear-gradient(120deg, rgba(10,8,6,0.84) 0%, rgba(10,8,6,0.52) 58%, rgba(10,8,6,0.78) 100%),
url("assets/Product images /STOCK/pexels-shvets-production-8972263.webp");
background-size: cover;
/* Anchored to the top, not the centre. The couple's heads sit at the very
top edge of the 3000x2000 source — there is no headroom above them — so
a centred anchor splits the overflow and takes the faces off first. At
1920x800 that is 240px cropped from the top; at 2560 it is 403px, which
is why they were showing from the shoulders down on a wide window.
Anchoring top puts every pixel of overflow on the bottom instead, where
it costs road rather than people. Client request, 2026-08-17. */
background-position: center top;
background-repeat: no-repeat;
}
.hero-intro-card {
max-width: 720px;
padding: 32px 34px;
background: rgba(10,8,6,0.76);
border: 1px solid rgba(224,128,48,0.24);
box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.hero-intro-headline {
font-size: clamp(1.1rem, 4.0vw, 3.5rem);
line-height: 1.06;
color: var(--white);
margin-bottom: 16px;
font-weight: 300;
letter-spacing: -0.018em;
text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
/* Client lockup in place of set type. Sized against the card rather than the
viewport so it tracks the copy beneath it, and capped so it never outgrows
the reading column. The graphic is white and orange on transparent, which
is why it needs no colour of its own. */
.hero-intro-lockup {
margin: 0 0 18px;
max-width: 560px;
width: 100%;
}
.hero-intro-lockup img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 991px) {
.hero-intro-lockup { max-width: 420px; }
}
.hero-intro-subheadline {
font-size: clamp(0.9rem, 1.4vw, 1.1rem);
line-height: 1.6;
color: rgba(245,239,230,0.9);
margin-bottom: 26px;
max-width: 540px;
}
.hero-intro-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 26px;
}
.hero-intro-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 20px;
border: 1px solid rgba(224,128,48,0.4);
font-family: 'Space Mono', monospace;
font-size: 9px;
letter-spacing: 0.17em;
text-transform: uppercase;
color: var(--white);
transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.hero-intro-cta:hover {
background: var(--amber);
border-color: var(--amber);
color: var(--black);
}
.hero-intro-cta.secondary {
color: var(--cream);
border-color: rgba(245,239,230,0.25);
}
.hero-intro-section {
border-top: 1px solid rgba(224,128,48,0.2);
padding-top: 20px;
}
.headline-emphasis {
font-weight: 700;
color: var(--white);
text-shadow:
0 0 12px rgba(224,128,48,0.9),
0 0 28px rgba(224,128,48,0.6),
0 0 56px rgba(224,128,48,0.35);
}
.hero-intro-section h2 {
font-size: clamp(1.4rem, 2.5vw, 2.2rem);
color: var(--white);
font-weight: 300;
margin-bottom: 10px;
letter-spacing: -0.015em;
}
.hero-intro-section p {
font-size: clamp(0.85rem, 1.2vw, 1rem);
line-height: 1.6;
color: rgba(245,239,230,0.85);
max-width: 620px;
}
/* ── Home video panel ── the 3D overview, its own section since the carousel came out. */
.panel-video .panel-inner { align-items: center; }
.panel-video .panel-content.panel-video-content {
width: 100%;
max-width: none;
height: auto;
padding: 0 !important;
margin: 0;
}
.vid-wrap {
width: min(1400px, 100%);
margin: 0 auto;
padding:
max(5rem, calc(env(safe-area-inset-top, 0px) + 76px))
clamp(1.5rem, 5vw, 4rem)
clamp(2.25rem, 5vh, 4rem);
box-sizing: border-box;
}
.vid-head { margin-bottom: clamp(16px, 2.6vh, 28px); }
.vid-title {
font-size: clamp(1.6rem, 3.2vw, 2.6rem);
font-weight: 300;
color: var(--white);
letter-spacing: -0.015em;
margin-bottom: 10px;
}
.vid-copy {
font-size: clamp(0.95rem, 1.2vw, 1.05rem);
line-height: 1.6;
color: rgba(245,239,230,0.85);
max-width: 58ch;
}
/* Fixed 16:9 box: the video keeps its true proportions rather than being cropped to fill
the panel, which on a portrait phone would leave only the middle of the frame visible. */
.vid-frame {
position: relative;
/* Height is the real constraint in a full-viewport panel, not width: size the box from the
room actually left below the heading (and, since the YouTube-channel link was added
below the frame, above that too) and let 16:9 set the width, so the video is as large
as the panel allows without ever being cropped. */
width: min(100%, calc((100vh - 356px) * 16 / 9));
width: min(100%, calc((100dvh - 356px) * 16 / 9));
margin: 0 auto;
aspect-ratio: 16 / 9;
overflow: hidden;
border: 1px solid rgba(224, 128, 48, 0.24);
background: #0a0806 url('assets/images/solenic-3d-overview-poster.webp') center center / cover no-repeat;
}
.vid-more {
text-align: center;
margin-top: clamp(16px, 2.4vh, 24px);
}
.vid-more-link {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.9rem;
color: rgba(245, 239, 230, 0.75);
text-decoration: none;
border-bottom: 1px solid rgba(224, 128, 48, 0.4);
padding-bottom: 2px;
transition: color 0.2s, border-color 0.2s, gap 0.2s;
}
.vid-more-link:hover {
color: var(--amber);
border-color: var(--amber);
gap: 12px;
}
@keyframes solenic-ring-pulse {
0% { transform: scale(1); opacity: 0.55; }
70% { transform: scale(1.65); opacity: 0; }
100% { transform: scale(1.65); opacity: 0; }
}
.vid-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 5;
width: clamp(64px, 7vw, 78px);
height: clamp(64px, 7vw, 78px);
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1.5px solid rgba(224, 128, 48, 0.55);
background: rgba(10, 8, 6, 0.52);
color: var(--white);
cursor: pointer;
box-shadow:
0 12px 40px rgba(0, 0, 0, 0.42),
0 0 0 0 rgba(224, 128, 48, 0.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
transform 0.3s var(--ease),
background 0.3s var(--ease),
border-color 0.3s var(--ease),
box-shadow 0.3s var(--ease),
opacity 0.3s var(--ease);
pointer-events: auto;
overflow: visible;
}
/* Pulsing ring */
.vid-play::before {
content: '';
position: absolute;
inset: -1px;
border-radius: 50%;
border: 1.5px solid rgba(224, 128, 48, 0.50);
animation: solenic-ring-pulse 2.6s ease-out infinite;
pointer-events: none;
}
/* "WATCH" micro-label below button */
.vid-play::after {
content: 'WATCH';
position: absolute;
top: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
font-family: 'Space Mono', monospace;
font-size: 9px;
letter-spacing: 0.24em;
color: rgba(245, 239, 230, 0.45);
white-space: nowrap;
pointer-events: none;
transition: color 0.3s var(--ease);
}
.vid-play:hover {
transform: translate(-50%, -50%) scale(1.08);
background: rgba(224, 128, 48, 0.20);
border-color: rgba(224, 128, 48, 0.80);
box-shadow:
0 0 0 10px rgba(224, 128, 48, 0.08),
0 20px 52px rgba(0, 0, 0, 0.52);
color: var(--white);
}
.vid-play:hover::before {
animation-play-state: paused;
opacity: 0;
}
.vid-play:hover::after {
color: rgba(224, 128, 48, 0.80);
}
.vid-play:focus-visible {
outline: 2px solid var(--amber);
outline-offset: 6px;
}
.vid-play i {
font-size: clamp(16px, 3.5vw, 22px);
margin-left: 3px;
}
.panel-hero .panel-bg,
.panel-hero .panel-overlay {
display: none;
}
@keyframes techScrollPulse {
0%, 100% {
border-color: rgba(224,128,48,0.35);
box-shadow:
0 0 0 rgba(224,128,48,0),
inset 0 0 0 rgba(224,128,48,0);
color: var(--white);
}
50% {
border-color: #ffa25a;
box-shadow:
0 0 10px rgba(224,128,48,0.75),
0 0 22px rgba(224,128,48,0.45),
inset 0 0 10px rgba(224,128,48,0.25);
color: #ffc98a;
}
}
/* Clinical trials enquiry drawer (slides from right) */
.clinical-enquiry {
position: fixed;
inset: 0;
z-index: 10060;
pointer-events: none;
visibility: hidden;
transition: visibility 0s linear 0.45s;
}
.clinical-enquiry.is-open {
pointer-events: auto;
visibility: visible;
transition-delay: 0s;
}
.clinical-enquiry-backdrop {
position: absolute;
inset: 0;
background: rgba(5, 4, 3, 0.78);
opacity: 0;
transition: opacity 0.45s var(--ease);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
}
.clinical-enquiry.is-open .clinical-enquiry-backdrop {
opacity: 1;
}
.clinical-enquiry-drawer {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: min(440px, 100%);
background: linear-gradient(165deg, var(--coal) 0%, var(--black) 100%);
border-left: 1px solid rgba(224,128,48,0.22);
box-shadow: -28px 0 72px rgba(0,0,0,0.55);
transform: translateX(102%);
transition: transform 0.5s var(--ease);
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.clinical-enquiry.is-open .clinical-enquiry-drawer {
transform: translateX(0);
}
.clinical-enquiry-close {
position: sticky;
top: 0;
align-self: flex-end;
margin: 14px 14px 0 0;
width: 42px;
height: 42px;
flex-shrink: 0;
border: 1px solid rgba(224,128,48,0.32);
background: rgba(10,8,6,0.85);
color: var(--cream);
font-size: 24px;
line-height: 1;
cursor: pointer;
border-radius: 2px;
transition: border-color 0.25s, background 0.25s, color 0.25s;
z-index: 2;
}
.clinical-enquiry-close:hover {
border-color: var(--amber);
color: var(--white);
background: rgba(224,128,48,0.08);
}
.clinical-enquiry-inner {
padding: 8px 36px 44px 36px;
flex: 1;
}
.clinical-enquiry-eyebrow {
font-family: 'Space Mono', monospace;
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--white);
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 12px;
}
.clinical-enquiry-eyebrow::before {
content: '';
width: 22px;
height: 1px;
background: var(--amber);
}
.clinical-enquiry-title {
font-family: 'Arimo', sans-serif;
font-size: clamp(1.85rem, 4vw, 2.35rem);
font-weight: 300;
color: var(--white);
line-height: 1.15;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.clinical-enquiry-intro {
font-size: 1.05rem;
line-height: 1.6;
color: rgba(245,239,230,0.82);
margin-bottom: 28px;
}
.clinical-enquiry-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.clinical-field {
display: flex;
flex-direction: column;
gap: 8px;
}
.clinical-field-label {
font-family: 'Arimo', sans-serif;
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: rgba(245,239,230,0.82);
}
.clinical-field-label .optional {
text-transform: none;
letter-spacing: 0;
font-size: 0.82rem;
font-weight: 400;
color: rgba(245,239,230,0.45);
}
.clinical-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.clinical-field input,
.clinical-field textarea {
width: 100%;
padding: 12px 14px;
border-radius: 2px;
border: 1px solid rgba(224,128,48,0.22);
background: rgba(10,8,6,0.65);
color: var(--cream);
font-family: 'Arimo', sans-serif;
font-size: 1.05rem;
line-height: 1.4;
transition: border-color 0.25s, box-shadow 0.25s;
}
.clinical-field textarea {
resize: vertical;
min-height: 88px;
}
.clinical-field input::placeholder,
.clinical-field textarea::placeholder {
color: rgba(245,239,230,0.28);
}
.clinical-field input:focus,
.clinical-field textarea:focus {
outline: none;
border-color: rgba(224,128,48,0.55);
box-shadow: 0 0 0 1px rgba(224,128,48,0.15);
}
.clinical-enquiry-submit {
margin-top: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
align-self: flex-start;
font-family: 'Arimo', sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: var(--black);
border: 1px solid var(--amber);
padding: 14px 30px;
border-radius: 3px;
background: var(--amber);
cursor: pointer;
transition: background 0.25s, border-color 0.25s, transform 0.15s;
}
.clinical-enquiry-submit i { transition: transform 0.2s; }
.clinical-enquiry-submit:hover {
background: var(--sand);
border-color: var(--sand);
}
.clinical-enquiry-submit:hover i { transform: translateX(3px); }
.clinical-enquiry-submit:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
/* inline success (replaces the form after submit) */
.clinical-enquiry-success {
display: none;
flex-direction: column;
align-items: flex-start;
gap: 0.55rem;
margin-top: 4px;
}
.clinical-enquiry-success.is-visible { display: flex; }
.clinical-enquiry-success i { font-size: 38px; color: var(--amber); margin-bottom: 4px; }
.clinical-success-title {
font-family: 'Arimo', sans-serif;
font-size: clamp(1.5rem, 2.4vw, 1.9rem);
font-weight: 700;
color: var(--white);
margin: 0;
}
.clinical-success-sub {
font-size: 1.02rem;
color: rgba(245,239,230,0.82);
line-height: 1.6;
max-width: 40ch;
margin: 0;
}
@media (max-width: 640px) {
.clinical-row { grid-template-columns: 1fr; }
}
/* ── Careers panel (v2) full-bleed main area; full viewport width when sidebar collapsed ── */
.panel-careers .panel-inner {
align-items: stretch;
justify-content: flex-start;
padding: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.panel-careers .panel-content.panel-careers-content {
flex: 1 1 auto;
width: 100%;
max-width: none;
min-height: 100%;
height: auto;
padding: 0 !important;
margin: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.careers-v2-wrap {
position: relative;
flex: 1 1 auto;
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
background: var(--c-ground);
color: var(--c-ink-soft);
font-family: 'Raleway', sans-serif;
font-weight: 300;
border-radius: 0;
overflow: hidden;
border: none;
box-sizing: border-box;
}
.careers-v2-noise {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='cn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cn)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
}
.careers-v2-glow {
position: absolute;
width: min(500px, 70vw);
height: min(500px, 70vw);
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--c-accent-rgb), 0.07) 0%, transparent 70%);
top: -120px;
right: -120px;
pointer-events: none;
z-index: 0;
}
.careers-v2-inner {
position: relative;
z-index: 1;
/* auto margins centre short content in the full-height panel; when the content
outgrows the viewport the margins collapse to 0 and it scrolls from the top,
which justify-content:center would clip */
flex: 0 1 auto;
width: 100%;
max-width: min(920px, 100%);
margin: auto;
padding:
max(5rem, calc(env(safe-area-inset-top, 0px) + 76px))
clamp(1.5rem, 5vw, 4rem)
clamp(2.25rem, 5vh, 4rem);
box-sizing: border-box;
}
.careers-v2-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 1.25rem;
}
.careers-v2-line {
width: 28px;
height: 1px;
background: var(--c-accent);
}
.careers-v2-eyebrow span {
font-family: 'Space Mono', monospace;
font-size: 9px;
letter-spacing: 0.22em;
color: var(--c-ink-strong);
text-transform: uppercase;
}
.careers-v2-headline {
font-family: 'Arimo', sans-serif;
/* Capped at 2.85rem so "Shape the future of medical innovation" holds one line.
The container stops growing at 792px while 5vw did not, so the old 3.25rem max
needed 887px in a 792px box and wrapped from 992 up. Below 768 it wraps by
necessity — one line there would mean 20px type. */
font-size: clamp(2.25rem, 5vw, 2.85rem);
font-weight: 300;
line-height: 1.06;
color: var(--c-ink-strong);
margin: 0 0 0.35rem;
}
.careers-v2-headline em {
font-style: italic;
color: var(--c-em);
}
.careers-v2-open-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(var(--c-accent-rgb), 0.06);
border: 0.5px solid rgba(var(--c-accent-rgb), 0.22);
border-radius: 2px;
padding: 6px 14px;
font-family: 'Space Mono', monospace;
font-size: 9px;
letter-spacing: 0.14em;
color: rgba(var(--c-ink-rgb), 0.82);
text-transform: uppercase;
margin-top: 1rem;
margin-bottom: 1.35rem;
}
.careers-v2-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-accent);
opacity: 0.55;
}
.careers-v2-divider {
width: 100%;
height: 1px;
background: linear-gradient(to right, rgba(var(--c-accent-rgb), 0.28), var(--c-chip), transparent);
margin-bottom: 2rem;
}
.careers-v2-pillars {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.careers-v2-pillar {
border: 0.5px solid rgba(var(--c-accent-rgb), 0.22);
border-radius: 2px;
padding: 1.15rem 1.2rem;
background: var(--c-shadow);
}
.careers-v2-pillar-icon {
font-size: 17px;
color: var(--c-accent);
margin-bottom: 0.65rem;
opacity: 0.95;
}
.careers-v2-pillar-title {
font-family: 'Space Mono', monospace;
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--c-ink-strong);
margin-bottom: 0.45rem;
}
.careers-v2-pillar-body {
font-size: 12px;
color: rgba(var(--c-ink-rgb), 0.82);
line-height: 1.6;
}
.careers-v2-cta-area {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.careers-v2-btn {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(var(--c-accent-rgb), 0.45);
background: transparent;
color: var(--c-ink-strong);
font-family: 'Space Mono', monospace;
font-size: 9px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 13px 26px;
cursor: pointer;
transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
border-radius: 2px;
}
.careers-v2-btn:hover {
background: rgba(var(--c-accent-rgb), 0.1);
border-color: var(--c-accent);
color: var(--c-ink-strong);
}
.careers-v2-btn-filled {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid var(--c-accent);
background: var(--c-accent);
color: var(--c-on-accent);
font-family: 'Space Mono', monospace;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 13px 26px;
cursor: pointer;
transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
border-radius: 2px;
}
.careers-v2-btn-filled:hover {
background: var(--c-accent-strong);
border-color: var(--c-accent-strong);
color: var(--c-ink-strong);
}
@media (max-width: 820px) {
.careers-v2-pillars {
grid-template-columns: 1fr;
}
}
/* Careers open positions accordion */
.careers-positions-accordion {
width: 100%;
margin: 0 0 1.75rem;
border: 0.5px solid rgba(var(--c-accent-rgb), 0.22);
border-radius: 2px;
background: var(--c-shadow);
overflow: hidden;
}
.careers-positions-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 1rem 1.15rem;
font-family: 'Space Mono', monospace;
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--c-ink-strong);
cursor: pointer;
list-style: none;
}
.careers-positions-summary::-webkit-details-marker {
display: none;
}
.careers-positions-chevron {
flex-shrink: 0;
font-size: 11px;
color: var(--c-ink-50);
transition: transform 0.28s var(--ease);
}
.careers-positions-accordion[open] .careers-positions-chevron {
transform: rotate(180deg);
color: var(--c-accent);
}
.careers-positions-panel {
padding: 0 1.15rem 1.15rem;
border-top: 0.5px solid rgba(var(--c-accent-rgb), 0.12);
}
.careers-positions-empty {
margin: 0;
padding-top: 1rem;
font-size: 1rem;
color: rgba(var(--c-ink-rgb), 0.82);
line-height: 1.75;
font-family: 'Arimo', sans-serif;
max-width: 520px;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* The Resources hover-image reveal and the scrim that sat over it are gone. The
.resources-hover-fill element had already been dropped from the markup, so the
image rule was dead — but the scrim was a `.panel-inner::after` fired by
`:has(.svc-item:hover)`, which still ran on every hover with nothing underneath
it to darken. It was a hardcoded rgba(10,8,6,…) gradient against token-driven
ink, so on the light surface it laid near-black over near-black text. Removed
rather than re-tokenised: with the image gone it has nothing left to do. */
/* ── Investors panel (v2) mirrors Careers layout ── */
.panel-investors .panel-inner {
align-items: stretch;
justify-content: flex-start;
padding: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.panel-investors .panel-content.panel-investors-content {
flex: 1 1 auto;
width: 100%;
max-width: none;
min-height: 100%;
height: auto;
padding: 0 !important;
margin: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.investors-v2-wrap {
position: relative;
flex: 1 1 auto;
width: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
background: transparent;
color: var(--c-ink-soft);
font-family: 'Raleway', sans-serif;
font-weight: 300;
border-radius: 0;
overflow: hidden;
border: none;
box-sizing: border-box;
}
.investors-v2-noise {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='in'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23in)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
}
.investors-v2-glow {
position: absolute;
width: min(500px, 70vw);
height: min(500px, 70vw);
border-radius: 50%;
background: radial-gradient(circle, rgba(var(--c-accent-rgb), 0.07) 0%, transparent 70%);
top: -120px;
right: -120px;
pointer-events: none;
z-index: 0;
}
/* same auto-margin centring as .careers-v2-inner — see the note there */
.investors-v2-inner {
position: relative;
z-index: 1;
flex: 0 1 auto;
width: 100%;
max-width: min(920px, 100%);
margin: auto;
padding:
max(5rem, calc(env(safe-area-inset-top, 0px) + 76px))
clamp(1.5rem, 5vw, 4rem)
clamp(2.25rem, 5vh, 4rem);
box-sizing: border-box;
}
.investors-v2-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 1.25rem;
}
.investors-v2-line {
width: 28px;
height: 1px;
background: var(--c-accent);
}
.investors-v2-eyebrow span {
font-family: 'Space Mono', monospace;
font-size: 9px;
letter-spacing: 0.22em;
color: var(--c-ink-strong);
text-transform: uppercase;
}
.investors-v2-headline {
font-family: 'Arimo', sans-serif;
font-size: clamp(2.25rem, 5vw, 3.25rem);
font-weight: 300;
line-height: 1.06;
color: var(--c-ink-strong);
margin: 0 0 0.35rem;
}
.investors-v2-headline em {
font-style: italic;
color: var(--c-em);
}
.investors-v2-intro {
font-size: 1rem;
line-height: 1.6;
color: rgba(var(--c-ink-rgb), 0.82);
max-width: 36rem;
margin: 1rem 0 0;
}
.investors-v2-divider {
width: 100%;
height: 1px;
background: linear-gradient(to right, rgba(var(--c-accent-rgb), 0.28), var(--c-chip), transparent);
margin: 2rem 0;
}
.investors-v2-actions {
display: flex;
flex-direction: column;
gap: 0.85rem;
max-width: 36rem;
}
.investors-v2-btn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: 100%;
min-height: 96px;
box-sizing: border-box;
border: 1px solid rgba(var(--c-accent-rgb), 0.45);
background: var(--c-shadow);
color: var(--c-ink-strong);
font-family: 'Space Mono', monospace;
font-size: 9px;
font-weight: 400;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 1rem 1.25rem;
cursor: pointer;
transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
border-radius: 2px;
text-decoration: none;
}
.investors-v2-btn:hover,
.investors-v2-btn:focus-visible {
background: rgba(var(--c-accent-rgb), 0.1);
border-color: var(--c-accent);
color: var(--c-ink-strong);
outline: none;
}
.investors-v2-btn-main {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.investors-v2-btn-main i:first-child {
font-size: 14px;
opacity: 0.9;
flex-shrink: 0;
}
.investors-v2-btn-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
}
.investors-v2-btn-title {
font-family: 'Space Mono', monospace;
font-size: 13.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: inherit;
}
.investors-v2-btn-desc {
font-family: 'Raleway', sans-serif;
font-size: 11px;
font-weight: 300;
letter-spacing: 0.02em;
text-transform: none;
color: rgba(var(--c-ink-rgb), 0.82);
line-height: 1.45;
}
.investors-v2-btn:hover .investors-v2-btn-desc,
.investors-v2-btn:focus-visible .investors-v2-btn-desc {
color: rgba(var(--c-ink-rgb), 0.82);
}
.investors-v2-btn-arrow {
font-size: 11px;
flex-shrink: 0;
opacity: 0.85;
}
.panel-news .panel-inner::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(105deg, rgba(var(--c-field-rgb), 0.92) 0%, rgba(var(--c-field-rgb), 0.72) 45%, rgba(var(--c-field-rgb), 0.56) 100%);
opacity: 0;
transition: opacity 0.4s var(--ease);
}
/* The type chip travels with the card, so it is keyed to .panel-services: scoped to
.panel-news it rendered as unstyled inline text once cards moved to Publications. */
.panel-services .svc-item .svc-type {
display: inline-block;
margin-left: 10px;
padding: 1px 6px 2px;
border: 1px solid rgba(var(--c-accent-rgb), 0.35);
border-radius: 2px;
font-family: 'Space Mono', monospace;
font-size: 8px;
letter-spacing: 0.18em;
color: var(--c-ink-strong);
vertical-align: 1px;
}
/* ── Contact: tabbed inquiry forms (aligned to sidebar 28px gutter) ── */
.panel-contact .panel-inner {
position: relative;
min-height: 100%;
}
.panel-contact .contact-gc {
--gc-gutter: clamp(24px, 5vw, 48px);
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
background: var(--c-ground-solid);
color: var(--c-ink-strong);
font-family: var(--sol-sans);
overflow: hidden;
opacity: 0;
transition: opacity 0.75s 0.45s var(--ease);
}
.panel-contact.active .contact-gc { opacity: 1; }
.panel-contact .gc-bg-text {
position: absolute;
bottom: clamp(-24px, -3vw, -30px);
left: clamp(-12px, -1vw, -10px);
font-family: var(--sol-sans);
font-size: clamp(72px, 14vw, 168px);
font-weight: 700;
color: rgba(var(--c-accent-rgb), 0.05);
line-height: 1;
pointer-events: none;
white-space: nowrap;
letter-spacing: -0.04em;
z-index: 0;
}
/* ── Unified contact: one section, one form, audience is a field ── */
.panel-contact .gc-uni {
position: relative;
z-index: 2;
width: 100%;
max-width: 620px;
margin: 0 auto;
padding: 0 var(--gc-gutter);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: clamp(20px, 2.6vh, 30px);
}
.panel-contact .gc-uni-head { }
.panel-contact .gc-uni-title {
font-family: var(--sol-sans);
font-size: clamp(2rem, 3.4vw, 2.9rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.05;
color: var(--c-ink-strong);
margin: 0 0 0.55rem;
}
.panel-contact .gc-uni-sub {
font-size: clamp(1rem, 1.4vw, 1.15rem);
font-weight: 400;
line-height: 1.6;
color: rgba(var(--c-ink-rgb), 0.82);
max-width: 48ch;
margin: 0;
}
.panel-contact .gc-uni-form {
--gc-form-gap: clamp(16px, 2.2vh, 22px);
display: flex;
flex-direction: column;
gap: var(--gc-form-gap);
}
/* audience segmented control */
.panel-contact .gc-uni-audience { display: flex; flex-direction: column; gap: 10px; }
.panel-contact .gc-uni-legend {
font-family: var(--sol-sans);
font-size: 1rem;
font-weight: 600;
color: var(--c-ink-strong);
}
.panel-contact .gc-seg-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.panel-contact .gc-seg {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
min-height: 54px;
padding: 8px 10px;
border: 1px solid rgba(var(--c-ink-rgb), 0.28);
border-radius: 3px;
background: rgba(var(--c-field-rgb), 0.5);
color: rgba(var(--c-ink-rgb), 0.82);
font-family: var(--sol-sans);
font-size: 1rem;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.panel-contact .gc-seg:hover { border-color: rgba(var(--c-accent-rgb), 0.6); color: var(--c-ink-strong); }
.panel-contact .gc-seg input {
position: absolute;
inset: 0;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
}
.panel-contact .gc-seg:has(input:checked) {
border-color: var(--c-accent);
background: rgba(var(--c-accent-rgb), 0.16);
color: var(--c-ink-strong);
box-shadow: inset 0 0 0 1px var(--c-accent);
}
.panel-contact .gc-seg:has(input:focus-visible) {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
/* Selected also carries weight, not just colour: the amber fill/ring is the colour cue,
700 vs 500 is the non-colour one. State must never rest on hue alone. */
.panel-contact .gc-seg:has(input:checked) span { font-weight: 700; }
/* Nothing chosen yet: all three rest "greyed out" (client, 2026-07-30). Muted with the
per-alpha ink token, not a raw alpha — cream at .55 on black reads fine, ink at .55 on
near-white does not, so the token carries a measured light value instead of inverting.
--c-ink-55 is the most muted step that still clears 4.5:1 on BOTH surfaces
(~8.3:1 light, ~5.6:1 dark). Do not push this fainter. */
.panel-contact .gc-seg-group.is-unset .gc-seg {
border-color: rgba(var(--c-ink-rgb), 0.2);
background: rgba(var(--c-field-rgb), 0.34);
color: var(--c-ink-55);
}
.panel-contact .gc-seg-group.is-unset .gc-seg:hover {
border-color: rgba(var(--c-accent-rgb), 0.6);
color: var(--c-ink-strong);
}
/* The guard moves focus here after a mouse click on Send, which does not satisfy
:focus-visible in WebKit — focus would land with no ring at all. While flagged,
show the ring on plain :focus so the destination is visible; it clears itself the
moment a selection is made or focus moves on. */
.panel-contact .gc-seg-group.is-flagged .gc-seg:has(input:focus) {
outline: 2px solid var(--c-accent);
outline-offset: 2px;
}
/* audience required message */
.panel-contact .gc-uni-error {
margin: 0;
padding: 11px 14px;
border-left: 3px solid var(--c-accent);
background: rgba(var(--c-accent-rgb), 0.1);
color: var(--c-ink-strong);
font-family: var(--sol-sans);
font-size: 1rem;
font-weight: 500;
line-height: 1.6;
}
.panel-contact .gc-uni-error:empty { display: none; }
/* per-audience verbiage, revealed on selection */
/* With nothing chosen the wrapper is empty and zero-height, but it still sits between
two flex items and so contributes a SECOND row gap (measured 43px vs 21px). Keep it
rendered — it is the live region, and display-toggling one costs the announcement —
and cancel exactly one gap instead. */
.panel-contact .gc-uni-blurbs:not(:has(.gc-uni-blurb:not([hidden]))) {
margin-top: calc(-1 * var(--gc-form-gap));
}
.panel-contact .gc-uni-blurb {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-left: 16px;
border-left: 2px solid var(--c-accent);
}
.panel-contact .gc-uni-blurb[hidden] { display: none; }
.panel-contact .gc-uni-blurb-title {
font-family: var(--sol-sans);
font-size: clamp(1.35rem, 2.2vw, 1.6rem);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.15;
color: var(--c-ink-strong);
margin: 0;
}
.panel-contact .gc-uni-blurb-title em { font-style: normal; color: var(--c-em); }
.panel-contact .gc-uni-blurb-body {
font-size: 1.02rem;
line-height: 1.6;
color: rgba(var(--c-ink-rgb), 0.82);
max-width: 52ch;
margin: 0;
}
@media (prefers-reduced-motion: no-preference) {
/* Reveal only. Base state is fully visible, so reduce-motion users get the copy
instantly rather than stranded at opacity 0. */
.panel-contact .gc-uni-blurb { animation: gcBlurbIn 0.32s var(--ease) both; }
@keyframes gcBlurbIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
}
/* fields */
.panel-contact .gc-uni-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.panel-contact .gc-field { margin: 0; }
.panel-contact .gc-label {
font-family: var(--sol-sans);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: rgba(var(--c-ink-rgb), 0.82);
display: block;
margin-bottom: 7px;
}
.panel-contact .gc-opt { font-weight: 400; color: rgba(var(--c-ink-rgb), 0.82); }
.panel-contact .gc-input {
width: 100%;
box-sizing: border-box;
background: rgba(var(--c-field-rgb), 0.6);
border: 1px solid rgba(var(--c-ink-rgb), 0.24);
border-radius: 3px;
padding: 13px 15px;
color: var(--c-ink-strong);
font-family: var(--sol-sans);
font-size: 1rem;
font-weight: 400;
line-height: 1.4;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.panel-contact .gc-input:focus { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.panel-contact .gc-input::placeholder { color: var(--c-ink-40); }
.panel-contact textarea.gc-input { resize: vertical; min-height: 110px; }
.panel-contact .gc-input-error {
border-color: var(--red) !important;
box-shadow: inset 0 0 0 1px var(--red) !important;
}
/* submit */
.panel-contact .gc-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
align-self: flex-start;
border: 1px solid var(--c-accent);
background: var(--c-accent);
color: var(--c-on-accent);
font-family: var(--sol-sans);
font-size: 1.02rem;
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
padding: 15px 34px;
cursor: pointer;
border-radius: 3px;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
margin-top: 2px;
}
.panel-contact .gc-btn i { font-size: 0.9em; transition: transform 0.2s; }
.panel-contact .gc-btn:hover { background: var(--c-em); border-color: var(--c-em); }
.panel-contact .gc-btn:hover i { transform: translateX(3px); }
.panel-contact .gc-btn:focus-visible { outline: 2px solid var(--c-ink-strong); outline-offset: 3px; }
/* success */
.panel-contact .gc-uni-success {
display: none;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 0.55rem;
padding: 0;
}
.panel-contact .gc-uni-success.is-visible { display: flex; }
.panel-contact .gc-uni-success i { font-size: 40px; color: var(--c-ink-strong); margin-bottom: 6px; }
.panel-contact .gc-success-title {
font-family: var(--sol-sans);
font-size: clamp(1.6rem, 2.6vw, 2rem);
font-weight: 700;
color: var(--c-ink-strong);
margin: 0;
}
.panel-contact .gc-success-sub {
font-size: 1.05rem;
color: rgba(var(--c-ink-rgb), 0.82);
line-height: 1.6;
max-width: 42ch;
margin: 0;
}
.panel-contact .gc-uni-form.is-hidden { display: none; }
@media (max-width: 960px) {
.panel-contact .gc-uni { max-width: 100%; }
.panel-contact .gc-uni-row { grid-template-columns: 1fr; }
.panel-contact .gc-seg-group { grid-template-columns: 1fr; }
.panel-contact .gc-seg { min-height: 50px; }
.panel-contact .gc-btn { width: 100%; align-self: stretch; }
}
/* ── Progress dots ── */
.progress-dots {
position: fixed; right: 28px; top: 50%;
transform: translateY(-50%); z-index: 250;
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.pdot {
position: relative; width: 2px; height: 28px;
background: rgba(224,128,48,0.15); cursor: pointer; border: none; padding: 0;
transition: background 0.3s;
}
.pdot.active { background: rgba(224,128,48,0.3); }
.pdot::after {
content: ''; position: absolute; top: 0; left: 0;
width: 100%; height: 0; background: var(--amber);
}
.pdot.active::after { height: 100%; }
.pdot:hover { background: rgba(224,128,48,0.45); }
.pdot-label {
position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 0.15em;
text-transform: uppercase; color: var(--white); white-space: nowrap;
opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.pdot:hover .pdot-label { opacity: 1; }
/* Counter */
.section-counter {
position: fixed; bottom: 30px; right: 28px; z-index: 250;
font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.12em;
color: rgba(245,239,230,0.82); display: flex; align-items: center; gap: 8px;
}
.section-counter .sc-cur { color: var(--white); font-size: 16px; }
/* Scroll hint */
/* ── Scroll cue ──────────────────────────────────────────────────────────
A down arrow at the foot of the hero. It is a button, not decoration: it
advances the deck, so the cue and the action are the same object.
Replaces an earlier version that was a text label with a pulsing neon
glow and a bobbing line. Two animations and a glow to say "scroll" is
three things doing one job, and the glow is the sort of effect this site
deliberately avoids. What is left is a slow drift down and back. */
.scroll-hint {
position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
z-index: 250;
appearance: none; background: none; border: 0; cursor: pointer;
width: 48px; height: 48px; padding: 0;
display: flex; align-items: center; justify-content: center;
color: var(--c-ink-strong);
transition: color .3s var(--ease), opacity .5s var(--ease);
}
/* It floats over photography, so legibility depended on whatever the image
happened to be doing underneath: measured 4.30:1 over the hero, under the
floor. A soft radial darkening guarantees a floor without giving the cue a
hard edge or turning it into a button-looking disc. Same approach the nav
uses for its links over the same photograph. */
.scroll-hint::before {
content: ''; position: absolute; inset: -6px; z-index: -1; pointer-events: none;
background: radial-gradient(circle, rgba(10,8,6,.55) 0%, rgba(10,8,6,.34) 45%, transparent 72%);
}
.scroll-hint:hover { color: var(--c-accent); }
.scroll-hint:focus-visible {
outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 50%;
}
.scroll-hint.hidden { opacity: 0; pointer-events: none; }
.scroll-hint-arrow { display: block; width: 26px; height: 26px; animation: scroll-drift 2.6s ease-in-out infinite; }
.scroll-hint-arrow svg { width: 100%; height: 100%; display: block; }
.scroll-hint:hover .scroll-hint-arrow { animation-play-state: paused; }
@keyframes scroll-drift {
0%, 100% { transform: translateY(0); opacity: .75; }
50% { transform: translateY(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.scroll-hint-arrow { animation: none; opacity: 1; }
}
/* ── Custom cursor ── */
.cursor {
position: fixed; pointer-events: none; z-index: 9998;
width: 8px; height: 8px; background: var(--red); border-radius: 50%;
transform: translate(-50%, -50%); mix-blend-mode: screen;
transition: width 0.3s, height 0.3s;
}
.cursor-ring {
position: fixed; pointer-events: none; z-index: 9997;
width: 32px; height: 32px; border: 1px solid rgba(224,128,48,0.45);
border-radius: 50%; transform: translate(-50%, -50%);
transition: width 0.25s, height 0.25s, border-color 0.3s;
}
body.cursor-hover .cursor { width: 14px; height: 14px; }
body.cursor-hover .cursor-ring { width: 54px; height: 54px; border-color: rgba(224,128,48,0.25); }
/* ── Mobile ── */
@media (max-width: 991px) {
body:not(.nav-closed) .carousel-wrap { padding-left: 0; }
.nav-toggle { left: 20px !important; }
.panel-careers .panel-inner {
align-items: stretch;
justify-content: flex-start;
padding: 0;
}
.panel-careers .panel-content.panel-careers-content {
max-width: none;
padding: 0 !important;
}
.panel-investors .panel-inner {
align-items: stretch;
justify-content: flex-start;
padding: 0;
}
.panel-investors .panel-content.panel-investors-content {
max-width: none;
padding: 0 !important;
}
.panel-content { padding: 0 32px; max-width: 100%; }
.hero-intro { padding: 0 20px; }
.hero-intro-card { padding: 24px 20px; }
.hero-intro-ctas { flex-direction: column; }
.vid-wrap { padding-left: 20px; padding-right: 20px; }
.cursor, .cursor-ring { display: none; }
.progress-dots { right: 14px; }
}
/* Client request: remove all eyebrow labels site-wide. */
[class*="eyebrow"] { display: none !important; }
/* Panel section headers frame each section — keep them (they use flex + a lead line). */
.panel-eyebrow { display: flex !important; }
/* Client request: remove amber "glow" behind text.
Dark legibility shadows over photos (rgba(0,0,0…)) are intentionally kept. */
.headline-emphasis { text-shadow: none; }
.scroll-hint-copy { text-shadow: none !important; animation: none !important; }
/* Contact panel hosts the global footer: the form fills the first screen,
the footer scrolls up beneath it (body/panels are overflow:hidden). */
.panel-contact .panel-inner { display: block; height: 100%; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.panel-contact .contact-gc { position: relative; inset: auto; height: 100vh; box-sizing: border-box; padding-top: 80px; }
.panel-contact solenic-footer { position: relative; z-index: 3; display: block; }
/* ═══════════════════════════════════════════════════════════════════════
SERVICES MODULE — News, Resources, Publications (.panel-services)
ONE SHELL, THREE VARIANTS.
Shell (.sx): a header row that spans the FULL width — eyebrow, title,
lede, and a reserved action slot on the right — with one full-width
content region (.sx-body) beneath it. The heading never occupies a
column. The previous layout gave it one: a 460px left rail with a single
line of body copy and dead space under it, while every item was squeezed
into a narrow right-hand column that scrolled internally. At 1920 the
heading had 460px for text that needed 687px, so it wrapped.
Variants pick the shape from the content, because these are genuinely
different things:
.sx-feed News one lead (big image + headline + opening
lines) with the rest beside it
.sx-menu Resources a stacked column of equal rows, no hierarchy —
five destinations, not a feed
.sx-list Publications a card row across the full width
FOUR RULES THE SHELL ENFORCES — this is the reusable part:
1. Edges land on the grid. `padding: … var(--grid-inset)` and NO
max-width, so the left edge sits under the logo and the right under
the end of the nav — measured 0px against .snav-inner. Same approach
as .panel-tech .tc; deriving the width any other way lands the right
edge mid-column.
2. No internal scroll. There is no max-height and no overflow on any of
these, at any viewport, on purpose.
3. Fixed count, not fitted count. Each panel renders every item it has
and the viewport gets no vote. Measuring a variable list against the
window is what produced sizeListViewport() / .is-toppinned and three
sessions of bugs; both are gone. If the item count outgrows the
panel, the fix is to cap the count and add a real archive link —
never to re-introduce a scrolling box.
4. One viewport, clear of the fixed nav. The top pad reserves --snav-h,
.sx is height:100% and .sx-body takes the remainder, so the lead
image absorbs whatever is left rather than the panel growing.
Colour is entirely --c-* driven. Nothing is drawn on a photograph here
except through the panel's own existing scrim, so there is no hardcoded
surface under token ink — the near-black-on-near-black failure has no
way in.
═══════════════════════════════════════════════════════════════════════ */
.panel-services .panel-inner { display: block; }
.panel-services .sx {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
gap: clamp(18px, 2.6vh, 36px);
padding: calc(var(--snav-h, 98px) + 22px) var(--grid-inset) 30px;
}
/* ── Header row ───────────────────────────────────────────────────────── */
.panel-services .sx-head {
flex: 0 0 auto;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: clamp(24px, 3vw, 56px);
}
.panel-services .sx-head-copy { min-width: 0; }
/* Smaller than the site-wide .panel-title clamp because this heading now sits
above the content rather than beside it — a 5.5rem title would push the items
off a laptop. It is a component decision on the shell, not a per-heading
override: all three panels take it from here. */
.panel-services .sx-title {
font-size: clamp(2.4rem, 3.6vw, 4rem);
margin-bottom: 14px;
}
.panel-services .sx-lede {
margin-bottom: 0;
font-size: 1.05rem;
line-height: 1.6;
color: var(--c-ink-soft);
}
/* Resources has no lede — the client has not written one and inventing a
summary for a hub would be inventing copy. An empty would still spend
its margin, so collapse it. */
.panel-services .sx-lede:empty { display: none; }
/* Reserved action slot ("All news →"). Styled here so the shell is complete;
no panel populates it yet because none has a real destination to point at. */
.panel-services .sx-action {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Space Mono', monospace; font-size: 11px;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--c-ink-strong);
padding-bottom: 6px;
border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.45);
transition: gap 0.3s var(--ease), border-color 0.3s var(--ease);
}
.panel-services .sx-action:hover { gap: 14px; border-bottom-color: var(--c-accent); }
/* ── Content region ───────────────────────────────────────────────────── */
.panel-services .sx-body {
flex: 1 1 auto;
min-height: 0; /* let the region shrink inside the flex column */
}
/* ── Shared card internals (all three variants) ───────────────────────── */
.panel-services .svc-item {
position: relative;
color: inherit;
cursor: pointer;
transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
transform 0.35s var(--ease);
}
.panel-services .svc-item.svc-placeholder { cursor: default; }
.panel-services .svc-item:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px rgba(var(--c-accent-rgb), 0.55);
}
.panel-services .svc-thumb {
background-size: cover; background-position: center;
background-color: var(--c-ground-solid);
border: 1px solid rgba(var(--c-accent-rgb), 0.22);
border-radius: 4px;
}
.panel-services .svc-body { min-width: 0; }
.panel-services .svc-num {
font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--c-ink-strong); margin-bottom: 10px;
}
.panel-services .svc-title {
font-size: clamp(1.15rem, 1.35vw, 1.4rem); font-weight: 600; line-height: 1.24;
color: var(--c-ink-strong); margin-bottom: 8px; letter-spacing: -0.01em;
}
/* Body copy: >=1rem at 1.6, capped near 58ch. Audience is older patients and
clinicians — this floor is real, not nominal. */
.panel-services .svc-desc {
font-size: 1rem; line-height: 1.6; color: var(--c-ink-strong);
margin-bottom: 12px; max-width: 58ch;
}
.panel-services .svc-read {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--c-ink-strong); transition: gap 0.3s var(--ease);
}
.panel-services .svc-read i { font-size: 0.85em; transition: transform 0.3s var(--ease); }
.panel-services .svc-item:hover .svc-read { gap: 12px; }
.panel-services .svc-item:hover .svc-read i { transform: translateX(3px); }
/* ── VARIANT: feed (News) ─────────────────────────────────────────────── */
.panel-services .sx-feed {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(24px, 2.6vw, 52px);
align-items: stretch;
}
.panel-services .sx-lead { min-height: 0; }
.panel-services .sx-lead .svc-item {
display: flex; flex-direction: column; gap: 16px;
height: 100%; padding: 0;
}
/* The image is the flexible one, so the lead absorbs whatever height the
viewport leaves instead of the panel overflowing. */
.panel-services .sx-lead .svc-thumb {
order: -1;
flex: 1 1 auto;
width: 100%; min-height: 120px;
}
.panel-services .sx-lead .svc-body { flex: 0 0 auto; }
.panel-services .sx-lead .svc-title { font-size: clamp(1.5rem, 1.9vw, 2rem); }
.panel-services .sx-lead .svc-item:hover .svc-thumb { border-color: rgba(var(--c-accent-rgb), 0.6); }
.panel-services .sx-rail {
display: flex; flex-direction: column;
min-height: 0;
}
/* flex:1 0 auto, not a fixed height: the five rows share whatever the lead's
column is given and centre their copy inside it, so the rail fills the region
exactly at any window height without anything measuring the window. `0` on the
shrink factor is deliberate — a row must never be squeezed below its copy. */
.panel-services .sx-rail .svc-item {
flex: 1 0 auto;
display: flex; flex-direction: column; justify-content: center;
padding: clamp(9px, 1.3vh, 16px) 14px;
border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.16);
border-radius: 4px;
}
.panel-services .sx-rail .svc-item:first-child { border-top: 1px solid rgba(var(--c-accent-rgb), 0.16); }
.panel-services .sx-rail .svc-item:hover { background: rgba(var(--c-accent-rgb), 0.08); }
/* The lead already carries the photography; repeating an 88px thumb five times
beside it turns the rail into a contact sheet and costs the height the copy
needs. Decorative only (aria-hidden) — no content is lost. */
.panel-services .sx-rail .svc-thumb { display: none; }
/* The index number, the type chip and the read arrow are OUR chrome, not client
copy — an index, a label that says "News" on the News panel, and an arrow on a
row that is already a link with a hover fill. Dropping them from the secondary
rows buys ~40px each, which is what lets all six stories show their title AND
their full description with no scrollbar. Every word the client approved is
still on screen. The lead keeps the full set. */
.panel-services .sx-rail .svc-num,
.panel-services .sx-rail .svc-read { display: none; }
.panel-services .sx-rail .svc-title { margin-bottom: 6px; }
.panel-services .sx-rail .svc-desc { margin-bottom: 0; }
/* ── VARIANT: menu (Resources) ────────────────────────────────────────── */
/* Four equal cards. No lead, no ordering weight: the client listed four
destinations of equal standing, and a hierarchy here would assert one they
have not. Fixed at four columns because the hub has exactly four rows. */
/* Stacked column, one destination per row — styled like the "Explore the
evidence" bridge card on the Science page (.sp-bridge in technology.css):
same hairline accent border, translucent blurred ground, 2px radius.
Row layout instead of a grid, so it isn't a fixed-count shape any more —
a 6th destination just adds another row. */
.panel-services .sx-menu {
display: flex;
flex-direction: column;
gap: 12px;
flex: 0 0 auto;
max-width: 700px;
}
.panel-services .sx-menu .svc-item {
border: 0.5px solid rgba(var(--c-accent-rgb), 0.28);
border-radius: 2px;
padding: 1.1rem 1.35rem;
background: rgba(10, 8, 6, 0.58);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.panel-services .sx-menu .svc-item:hover {
background: rgba(var(--c-accent-rgb), 0.08);
border-color: rgba(var(--c-accent-rgb), 0.55);
}
/* Number, title and the VISIT cue all on one line. */
.panel-services .sx-menu .svc-body {
display: flex; flex-direction: row; align-items: center;
gap: 20px;
}
.panel-services .sx-menu .svc-num {
margin-bottom: 0; flex-shrink: 0;
color: var(--c-accent);
}
.panel-services .sx-menu .svc-title {
font-size: clamp(1.1rem, 1.3vw, 1.3rem); margin-bottom: 0;
flex: 1 1 auto; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel-services .sx-menu .svc-read {
margin-top: 0; flex-shrink: 0;
color: var(--c-accent);
}
/* ── VARIANT: list (Publications) ─────────────────────────────────────── */
.panel-services .sx-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 2vw, 40px);
align-items: start;
flex: 0 0 auto; /* sparse: the module centres, see .sx-centred */
}
.panel-services .sx-list .svc-item {
display: flex; flex-direction: column; gap: 16px;
padding: 0;
}
/* A 3:2 landscape plate, not "whatever height is left over". All three sources
are landscape — a press-release screenshot and two clinical images — and
filling a 535px-tall column with them cropped the AAOS release down to its
middle band, cutting the headline it exists to show. The ratio is literal
rather than derived from the row: a flex item that takes its height from
aspect-ratio while the row takes its height from the item is circular, and
WebKit resolves that to zero (it collapsed the Technology thumb strip the
same way). Here the width is definite from the grid column, so it is not. */
.panel-services .sx-list .svc-thumb {
order: -1;
flex: 0 0 auto;
width: 100%;
aspect-ratio: 3 / 2;
}
.panel-services .sx-list .svc-body { flex: 0 0 auto; }
.panel-services .sx-list .svc-item:hover .svc-thumb { border-color: rgba(var(--c-accent-rgb), 0.6); }
/* Sparse variants (menu, list) centre as a UNIT — heading and cards together —
rather than pinning under the nav with a field of dead space below. That
top-pinned look is exactly what the client flagged on Careers and Investors.
The feed is not in here: News has enough content to fill the region, and
filling is what lets the lead image absorb the leftover height.
Resources was pulled out of this rule on request (2026-08-22): its heading
now pins to the top like the feed variant, cards following directly under it. */
.panel-services.panel-publications .sx { justify-content: center; }
/* ── Mobile: one column, same order, lead first ───────────────────────── */
@media (max-width: 991px) {
.panel-services .panel-inner {
/* The module cannot fit six articles on a 393x852 screen without hiding
copy, so the PANEL scrolls — the site's established mobile behaviour
(Careers, Investors and Contact all do this). That is not the internal
scrolling box rule 2 forbids: there is still no max-height and no
overflow on .sx-body, so nothing is ever hidden behind a fold inside
a card list. */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.panel-services .sx {
height: auto;
min-height: 100%;
padding: calc(var(--snav-h, 74px) + 18px) var(--grid-inset) 44px;
gap: 22px;
}
.panel-services .sx-head { display: block; }
.panel-services .sx-title { font-size: clamp(1.9rem, 7vw, 2.6rem); }
.panel-services .sx-action { margin-top: 18px; }
.panel-services .sx-feed,
.panel-services .sx-menu,
.panel-services .sx-list {
display: flex;
flex-direction: column;
gap: 18px;
}
.panel-services:is(.panel-resources, .panel-publications) .sx { justify-content: flex-start; }
.panel-services .sx-lead .svc-item,
.panel-services .sx-list .svc-item { height: auto; }
.panel-services .sx-lead .svc-thumb { flex: 0 0 auto; height: 190px; }
.panel-services .sx-list .svc-thumb { aspect-ratio: 16 / 9; }
.panel-services .sx-rail { gap: 0; }
.panel-services .sx-rail .svc-item { flex: 0 0 auto; padding: 16px 12px; }
.panel-services .sx-menu .svc-item { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
.panel-services .svc-item,
.panel-services .svc-read,
.panel-services .svc-read i,
.panel-services .sx-action { transition-duration: 0.01ms !important; }
}
/* ═══════════════════════════════════════════════════════════
GRID — panel copy columns line up with the nav container.
═══════════════════════════════════════════════════════════ */
/* Grid alignment is DESKTOP-ONLY — mobile keeps its existing layout untouched. */
@media (min-width: 992px) {
/* Left content on every panel → grid column 1. The rail is the grid inset
(so the copy starts under the logo) and it is added back into the cap,
which is what keeps the measure constant instead of shrinking as the
inset grows. See the note on .panel-content. */
.panel-content {
--pc-inset: var(--grid-inset);
padding: 0 0 0 var(--pc-inset);
max-width: calc(var(--pc-measure) + var(--pc-inset));
}
/* hero card → grid column 1 */
.hero-intro { padding-left: var(--grid-inset); }
/* Client: "The non-invasive platform." stays on one line (desktop only). */
.hero-intro-card { max-width: 860px; }
.headline-emphasis { white-space: nowrap; }
}
/* ── Readability standard: body-copy MEASURE (≈58ch, ~50-66) so lines stay short for low vision. Pairs with line-height 1.6. ── */
.panel-body,
.hero-intro-subheadline,
.hero-intro-section p,
.clinical-enquiry-intro,
.careers-v2-pillar-body,
.investors-v2-intro { max-width: 58ch; }
/* .panel-services .svc-desc carries its own 58ch cap in the services module. */
/* Placeholder note under a section heading ("Publications coming soon"). Was an inline
colour at .45 alpha, which beat every stylesheet rule: it failed contrast on the dark
panel and would have stayed cream on a light one. */
.panel-body.panel-note {
margin-top: 12px;
/* 1rem floor: on a phone .panel-body already clamps down to 0.9rem, and 0.95rem of
that landed the note at 15.2px, under the body-copy standard. It is the only copy
on the Industry Publications and Image gallery panels, so it cannot be the
smallest text there. */
font-size: 1rem;
color: rgba(245, 239, 230, 0.86);
}
/* ═══════════════════════════════════════════════════════════════════════
TECHNOLOGY PANEL — CAROUSEL
Replaces the 8-tile vertical strip. One contained image with its title
and copy inside it, a labelled thumbnail strip beneath, no arrows.
Outer edges sit on the nav's container (--grid-inset both sides, no
max-width of its own) so the module lines up with the logo on the left
and the end of the nav on the right.
Colour: the ground and its chrome read --c-* and flip with the surface.
Anything ON a photograph — captions, their scrim, thumb titles — is
hardcoded cream on a hardcoded gradient, because a photograph does not
flip. Never mix the two: a fixed surface under token-driven ink is the
near-black-on-near-black failure from dotmatrix v4.
═══════════════════════════════════════════════════════════════════════ */
/* Same pattern as .panel-contact .panel-inner: the carousel (.tc) fills exactly
one viewport in normal flow, and the footer sits right after it as a real
sibling — overflow-y:auto turns .panel-inner into its own scroll container
so scrolling past the carousel reveals it, without the carousel itself
needing to shrink or the rest of the panel deck gaining a scrollbar. */
.panel-tech .panel-inner { display: block; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.panel-tech solenic-footer { position: relative; z-index: 3; display: block; }
.panel-tech .tc {
/* Width comes from the grid, height from the viewport. Deriving width
from height (height x ratio) produced a number unrelated to the
12-column grid, so the image's right edge landed mid-column. Outer
edges on the grid + fitting one viewport + a fixed crop cannot all
hold; the crop is what gives. */
--tc-frame-h: clamp(240px, calc(100dvh - var(--snav-h, 72px) - 180px), 900px);
--tc-ar-w: 3;
--tc-ar-h: 2;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
padding: calc(var(--snav-h, 72px) + 20px) var(--grid-inset) 24px;
background:
radial-gradient(120% 90% at 30% 40%,
rgba(var(--c-ink-rgb), 0) 0%,
rgba(var(--c-ink-rgb), 0.035) 62%,
rgba(var(--c-ink-rgb), 0.06) 100%),
var(--c-ground);
}
.panel-tech .tc-frame {
position: relative;
width: 100%;
height: var(--tc-frame-h);
flex: 0 0 auto;
overflow: hidden;
background: rgba(var(--c-coal-rgb), 1);
}
.panel-tech .tc-slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.55s var(--ease);
}
.panel-tech .tc-slide.is-active { opacity: 1; pointer-events: auto; }
.panel-tech .tc-slide-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* The existing technology tiles put caption text straight on the
photograph and measure 3.31-4.25:1, under the 4.5 floor. New work, so
it gets a real scrim instead of inheriting that. */
.panel-tech .tc-slide-grad {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to top,
rgba(8,6,5,0.94) 0%,
rgba(8,6,5,0.86) 22%,
rgba(8,6,5,0.55) 45%,
rgba(8,6,5,0.16) 68%,
rgba(8,6,5,0.06) 100%);
}
.panel-tech .tc-caption {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 2;
padding: 34px 44px;
}
.panel-tech .tc-title {
font-family: var(--sol-sans);
font-size: clamp(1.6rem, 2.4vw, 2.5rem);
font-weight: 600;
line-height: 1.14;
letter-spacing: -0.02em;
color: #f5efe6;
margin: 0 0 12px;
}
.panel-tech .tc-body {
font-size: 1rem;
line-height: 1.6;
color: rgba(245,239,230,0.9);
margin: 0;
max-width: 58ch;
}
/* Regulatory line for the one slide with a real device photo (Sola2).
Bottom-right of the frame, clear of the caption's left-aligned text,
sized to match .tc-body so it reads as body copy, not a footnote. */
.panel-tech .tc-disclaimer {
position: absolute;
right: 44px; bottom: 34px;
z-index: 2;
font-size: 1rem;
line-height: 1.6;
color: rgba(245,239,230,0.6);
margin: 0;
text-align: right;
pointer-events: none;
}
.panel-tech .tc-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 4px 24px;
font-size: 1rem;
line-height: 1.6;
color: rgba(245,239,230,0.9);
}
.panel-tech .tc-list li { position: relative; padding-left: 16px; }
.panel-tech .tc-list li::before {
content: '';
position: absolute;
left: 0; top: 0.72em;
width: 7px; height: 1px;
background: #e08030;
}
/* Plain type, no box and no status dot — it is a statement of fact, and a
bordered chip beside the CTA read as a second button. */
.panel-tech .tc-tag {
margin: 14px 0 0;
font-family: var(--sol-mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245,239,230,0.66);
}
.panel-tech .tc-cta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 22px;
padding: 14px 28px;
font-family: var(--sol-mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #f5efe6;
border: 1px solid rgba(224,128,48,0.6);
background: rgba(10,8,6,0.3);
text-decoration: none;
cursor: pointer;
transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.panel-tech .tc-cta:hover {
border-color: #e08030;
color: #0a0806;
background: rgba(224,128,48,0.9);
}
.panel-tech .tc-cta:focus-visible { outline: 2px solid #e08030; outline-offset: 3px; }
/* No prev/next control. The labelled strip is the navigation — every slide
is one named click away, which beats a chevron for an older audience and
keeps the photograph free of chrome. Swipe and arrow keys still work. */
.panel-tech .tc-play {
position: absolute;
z-index: 3;
top: 42%; left: 50%;
transform: translate(-50%, -50%);
width: 76px; height: 76px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(10,8,6,0.5);
border: 1px solid rgba(224,128,48,0.75);
color: #f5efe6;
font-size: 19px;
cursor: pointer;
transition: background 0.25s, border-color 0.25s;
}
.panel-tech .tc-play:hover { background: rgba(224,128,48,0.3); border-color: #e08030; }
/* Every thumb visible, always — the count sets the size, not the reverse. */
.panel-tech .tc-thumbs {
display: flex;
gap: 8px;
align-items: stretch;
width: 100%;
padding: 4px 2px 6px;
}
.panel-tech .tc-thumb {
position: relative;
flex: 1 1 0;
min-width: 0;
aspect-ratio: var(--tc-ar-w) / var(--tc-ar-h);
padding: 0;
border: 1px solid rgba(var(--c-ink-rgb), 0.18);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
cursor: pointer;
opacity: 0.68;
filter: saturate(0.82);
transition: opacity 0.26s var(--ease), transform 0.26s var(--ease),
border-color 0.26s var(--ease), filter 0.26s var(--ease);
}
.panel-tech .tc-thumb:hover { opacity: 0.9; filter: saturate(1); }
.panel-tech .tc-thumb.is-active {
opacity: 1;
filter: saturate(1);
border-color: var(--c-accent);
border-width: 2px;
transform: translateY(-3px);
}
.panel-tech .tc-thumb:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.panel-tech .tc-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(8,6,5,0.92) 0%,
rgba(8,6,5,0.72) 34%,
rgba(8,6,5,0.22) 62%,
rgba(8,6,5,0.04) 100%);
}
.panel-tech .tc-thumb-title {
position: absolute;
z-index: 2;
left: 0; right: 0; bottom: 0;
padding: 9px 10px 10px;
text-align: left;
font-size: clamp(11px, 0.72vw, 13px);
font-weight: 600;
line-height: 1.28;
color: rgba(245,239,230,0.92);
}
.panel-tech .tc-thumb.is-active .tc-thumb-title { color: #f5efe6; }
.panel-tech .tc-thumb-play {
position: absolute;
z-index: 2;
top: 34%; left: 50%;
transform: translate(-50%, -50%);
color: #f5efe6;
font-size: 15px;
text-shadow: 0 2px 8px rgba(10,8,6,0.85);
}
/* Video plays where it sits. The old modal existed because the Drive
/preview embed paints its own chrome and the hero cropped with
scale(1.12) to hide it; the framed image has no such conflict. */
.panel-tech .tc-video {
position: absolute;
inset: 0;
z-index: 6;
background: #000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s var(--ease), visibility 0s 0.3s;
}
.panel-tech.is-playing .tc-video {
opacity: 1;
visibility: visible;
transition: opacity 0.3s var(--ease), visibility 0s 0s;
}
.panel-tech .tc-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.panel-tech.is-playing .tc-caption,
.panel-tech.is-playing .tc-slide-grad,
.panel-tech.is-playing .tc-disclaimer,
.panel-tech.is-playing .tc-play { opacity: 0; pointer-events: none; }
.panel-tech .tc-close {
position: absolute;
z-index: 7;
top: 12px; right: 12px;
width: 44px; height: 44px;
display: none;
place-items: center;
background: rgba(10,8,6,0.55);
border: 1px solid rgba(245,239,230,0.4);
color: #f5efe6;
font-size: 15px;
cursor: pointer;
}
.panel-tech.is-playing .tc-close { display: grid; }
.panel-tech .tc-close:hover { background: rgba(224,128,48,0.9); border-color: #e08030; color: #0a0806; }
@media (max-width: 991px) {
.panel-tech .tc {
padding: calc(var(--snav-h, 64px) + 16px) 16px 20px;
gap: 12px;
}
/* A 3:2 box at 393px is 221px tall — a title plus three lines of body
cannot sit inside it and stay readable. 3:4 keeps the copy in the
image, as asked, without dropping under the 1rem floor. */
.panel-tech .tc-frame { height: auto; aspect-ratio: 3 / 4; }
.panel-tech .tc-caption { padding: 24px 20px 22px; }
/* Bottom-right collides with the stacked caption here — the 3:4 crop
leaves title + body + button tall enough to reach the frame's own
bottom padding. Top-right is clear of all of that. */
.panel-tech .tc-disclaimer { top: 16px; right: 16px; bottom: auto; text-align: right; }
.panel-tech .tc-title { font-size: clamp(1.5rem, 6vw, 2rem); }
.panel-tech .tc-body, .panel-tech .tc-list { font-size: 1rem; max-width: none; }
/* The strip wraps to a three-column grid rather than scrolling sideways,
so all eight stay visible here too. At 402px that is 118px per thumb,
which still carries a readable title. Eight across three columns is
still three rows, so it costs the same ~262px of height, which is why
the image keeps the 3:4 crop rather than growing: 80 nav+pad
+ 493 image + 12 gap + 262 grid + 20 pad = 867 of 874. */
.panel-tech .tc-thumbs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
overflow: visible;
/* align-items:start is load-bearing, not tidiness. Grid items stretch
by default, so the row's height depends on the item while the item's
height depends on aspect-ratio — circular. Safari resolves that to
zero and collapses every thumb to a sliver; Chromium doesn't, so it
passes a Chromium check and fails in the browser that matters. */
align-items: start;
}
.panel-tech .tc-thumb {
flex: none;
width: auto;
align-self: start;
aspect-ratio: 3 / 2; /* literal, not the vars, so nothing to resolve */
}
.panel-tech .tc-thumb-title { font-size: 12px; }
.panel-tech .tc-play { width: 60px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
.panel-tech .tc-slide,
.panel-tech .tc-thumb,
.panel-tech .tc-thumb-title { transition-duration: 0.01ms !important; }
}
/* ═══════════════════════════════════════════════════════════════════════
IMAGE GALLERY PANEL — CAROUSEL
The Technology carousel above with every text layer removed: no caption,
title, body, tag, CTA, thumb title, and no caption scrim, which existed
only to make that copy legible on a photograph. One contained image and a
thumbnail strip beneath it. No prev/next arrows — same call as Technology:
the strip is the navigation, with arrow keys and swipe as secondaries.
Its own namespace rather than a second selector on the .tc rules: the
Technology carousel is an approved locked design and half of those rules
(caption, scrim, video, play, close) have no counterpart here.
There is no type in the component at all — no caption, number, title or
counter. The images carry their descriptions in alt only.
Outer edges sit on the nav's container (--grid-inset both sides, no
max-width of its own) so the module lines up with the logo on the left
and the end of the nav on the right.
Colour: everything here is token-driven. The images are photographs, but
nothing is drawn ON them — no type, no scrim — so the fixed-surface-under-
token-ink mix that produced the near-black-on-near-black failure has no
way in. The one surface that shows through the images is the letterbox the
contained fit leaves, and it reads --c-coal, a token, on both the frame and
the thumb plates.
═══════════════════════════════════════════════════════════════════════ */
/* Zero slides → nothing renders and the panel's "coming soon" note stands.
One or more → the carousel replaces the note, and the panel's photographic
ground goes with it, because the carousel brings its own --c-* ground the
way .panel-tech does. */
.panel-image-gallery .ig { display: none; }
.panel-image-gallery:has(.ig-slide) .ig { display: flex; }
.panel-image-gallery:has(.ig-slide) :is(.panel-content, .panel-bg, .panel-overlay) { display: none; }
.panel-image-gallery:has(.ig-slide) .panel-inner { display: block; }
.panel-image-gallery .ig {
position: relative;
height: 100%;
flex-direction: column;
gap: 14px;
padding: calc(var(--snav-h, 72px) + 20px) var(--grid-inset) 24px;
background:
radial-gradient(120% 90% at 30% 40%,
rgba(var(--c-ink-rgb), 0) 0%,
rgba(var(--c-ink-rgb), 0.035) 62%,
rgba(var(--c-ink-rgb), 0.06) 100%),
var(--c-ground);
}
/* Width comes from the grid; the frame then takes whatever height the strip
leaves. Technology can pin a frame height because it has exactly eight
thumbs; here the count is the client's to set. The strip now has a fixed
height of its own (see below), so what is left over is a constant — the
frame is the same box on every slide and does not move when the image
inside it changes shape, which with ratios from 0.48:1 to 1.78:1 is the
whole game. */
.panel-image-gallery .ig-frame {
position: relative;
width: 100%;
flex: 1 1 auto;
min-height: 180px;
overflow: hidden;
background: rgba(var(--c-coal-rgb), 1);
}
.panel-image-gallery .ig-slide {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.55s var(--ease);
}
.panel-image-gallery .ig-slide.is-active { opacity: 1; pointer-events: auto; }
/* Client, 2026-08-17: each image carries its title, on the showcased image
only — never on the thumbnails, which stay bare so the strip reads as
shape and not as a wall of words.
The titles were already in the markup as alt text, de-prefixed from the
file names ("01-original-concept-drawings.webp" -> "Original concept
drawings"), so the caption reuses that wording rather than introducing a
second source of truth. It is aria-hidden: the img's alt already gives
assistive tech the same string, and announcing both would double it.
Images are object-fit: contain, so the foot of the frame is sometimes
the picture and sometimes the coal ground behind it. The scrim covers
both cases without drawing a hard edge on either. */
.panel-image-gallery .ig-cap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
padding: 44px clamp(16px, 3vw, 32px) clamp(14px, 2vw, 20px);
font-family: "Space Mono", monospace;
font-size: clamp(11px, 1.05vw, 13px);
letter-spacing: 0.09em;
text-transform: uppercase;
color: rgba(var(--c-ink-rgb), 0.94);
text-align: center;
pointer-events: none;
background: linear-gradient(
180deg,
rgba(var(--c-coal-rgb), 0) 0%,
rgba(var(--c-coal-rgb), 0.72) 46%,
rgba(var(--c-coal-rgb), 0.92) 100%
);
}
/* contain, not cover, on both. Client instruction: nothing may be cropped,
the vertical images are intentional and are shown whole. The bars that
leaves are the frame's own --c-coal ground, a token, so they read as the
plate the image sits on rather than as a border. The thumbs are contained
for the same reason plus a navigational one: a 3:2 cover crop of a 3:4
drawing shows only its middle band, while a contained thumb tells you the
shape of the image you are about to open. */
.panel-image-gallery .ig-slide-img,
.panel-image-gallery .ig-thumb-img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
/* SEVENTEEN THUMBS.
The strip was built on "every thumb visible, the count sets the size".
That inverts past about a dozen: seventeen across the 1272px grid is 67px
each, and the phone's three-column wrap becomes six rows that take 478px
of an 852px viewport and leave the frame 252px. So the size is fixed and
the strip scrolls instead — the frame keeps its height at any count, the
thumbs stay legible at any count, and the client can add or remove images
without the component resizing itself.
The overflow is signalled two ways: the last thumb is cut mid-width rather
than landing flush, and home.js fades whichever edge has more behind it
via --ig-fade-l / --ig-fade-r. Both edges sit at 0 when nothing overflows,
so the mask is a no-op on a short strip.
Scrolling is driven by scrollLeft in home.js — never scrollIntoView; see
the note there. */
.panel-image-gallery .ig-thumbs {
--ig-thumb-w: clamp(78px, 7.2vw, 118px);
--ig-fade-l: 0px;
--ig-fade-r: 0px;
display: flex;
gap: 8px;
align-items: start;
width: 100%;
flex: 0 0 auto;
padding: 6px 0 8px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
/* A flick that runs past the end of the strip must not hand the rest of the
gesture to the panel deck. */
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(to right,
transparent 0, #000 var(--ig-fade-l),
#000 calc(100% - var(--ig-fade-r)), transparent 100%);
mask-image: linear-gradient(to right,
transparent 0, #000 var(--ig-fade-l),
#000 calc(100% - var(--ig-fade-r)), transparent 100%);
}
/* Width and height are both literal — the 3:2 is done in calc, not in
aspect-ratio. Grid/flex items that take their height from aspect-ratio while
the row takes its height from the item are circular, and WebKit resolves that
to zero and collapses the strip to slivers; Chromium does not, so it passes a
Chromium check and fails in the browser that matters. There is nothing left
here to resolve. */
.panel-image-gallery .ig-thumb {
position: relative;
flex: 0 0 auto;
width: var(--ig-thumb-w);
height: calc(var(--ig-thumb-w) / 1.5);
padding: 0;
border: 1px solid rgba(var(--c-ink-rgb), 0.18);
background: rgba(var(--c-coal-rgb), 1);
overflow: hidden;
cursor: pointer;
opacity: 0.68;
filter: saturate(0.82);
transition: opacity 0.26s var(--ease), transform 0.26s var(--ease),
border-color 0.26s var(--ease), filter 0.26s var(--ease);
}
.panel-image-gallery .ig-thumb:hover { opacity: 0.9; filter: saturate(1); }
.panel-image-gallery .ig-thumb.is-active {
opacity: 1;
filter: saturate(1);
border-color: var(--c-accent);
border-width: 2px;
transform: translateY(-3px);
}
.panel-image-gallery .ig-thumb:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
@media (max-width: 991px) {
/* --grid-inset here too, not the 16px the Technology carousel drops to on a
phone: the whole point of the layout is that the module's edges are the
grid's edges, and 16px puts them 8px outside .snav-inner at 393px. */
.panel-image-gallery .ig {
padding: calc(var(--snav-h, 64px) + 16px) var(--grid-inset) 20px;
gap: 12px;
}
/* Same scrolling strip as desktop, one size down. The three-column wrap that
used to live here is gone: at seventeen it was six rows, 478px of an 852px
viewport, and it left the frame 252px. Nothing changes structurally between
the breakpoints now — only --ig-thumb-w, which the clamp already handles,
and a tighter gap. */
.panel-image-gallery .ig-thumbs {
gap: 6px;
padding: 5px 0 7px;
}
}
@media (prefers-reduced-motion: reduce) {
.panel-image-gallery .ig-slide,
.panel-image-gallery .ig-thumb { transition-duration: 0.01ms !important; }
/* The strip is recentred on every slide change; smooth would animate that. */
.panel-image-gallery .ig-thumbs { scroll-behavior: auto; }
}
/* ═══════════════════════════════════════════════════════════════════════
SINGLE-LINE LEDES — three specific sentences the client asked to sit on
one line on 2026-08-11.
Each was wrapping to two lines because of a measure cap, not because of
its type size. The caps are declared in `ch`, which scales WITH the font,
so the box shrinks at exactly the rate the text does: measured at 75% and
50% type, all three still wrapped at the same line count. Shrinking the
type here does nothing. The box has to get wider, so that is what these
rules do — and only for the three elements named, on desktop.
Desktop only (992px, the breakpoint the grid block above already uses).
On a phone every one of these still takes the shared 58ch measure and
wraps normally; a 960px line on a 390px screen is not a line, it is an
overflow.
═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
/* Video panel lede. Was capped by `.vid-copy { max-width: 58ch }` =
541.9px; the sentence needs 714.4px. 760px is the round number above
that with room for a font-loading difference, and it is well inside
.vid-head, which is the full 1272px content column. */
.panel-video .vid-copy { max-width: 760px; }
/* Publications lede. Same story: it takes the shared `.panel-body`
58ch measure (541.9px). This sentence is 129 characters and measures
967.45px set on one line, so 1000px — still inside .sx-head, which is
the full 1272px content column. Scoped to this panel: News uses
.sx-lede too, its sentence is half the length, and its line count is
not in question. */
.panel-services.panel-publications .sx-lede { max-width: 1000px; }
/* Upcoming events body. This one sat behind TWO caps stacked, and
lifting either alone changed nothing:
1. .panel-content's --pc-measure (560px), via the max-width calc in
the grid block above;
2. .panel-body's 58ch (567.7px), which took over the moment the
first was lifted.
So both are raised, to 960px against a requirement of 941.2px.
--pc-measure is re-declared on THIS PANEL'S .panel-content, not on the
token's own rule — it is the shared measure for every panel on the
page and changing it there would silently re-flow all of them. The
cap that results is 1072px at 1496 and 1284px at 1920; the box shrinks
to its content, so it renders 1053px and 1265px. Both are inside the
viewport and neither adds horizontal scroll.
The `:not(.panel-note)` keeps "Event listings coming soon." on the
58ch readability measure; it is four words and never needed the room. */
.panel-upcoming-events .panel-content { --pc-measure: 960px; }
.panel-upcoming-events .panel-body:not(.panel-note) { max-width: 960px; }
/* News lede, same client ask (2026-08-11): one line, not two. Scoped to
.panel-news so it cannot reach the Publications lede, which shares the
.sx-lede class and carries its own width a few rules above. */
.panel-news .sx-lede { max-width: 680px; }
}
/* ── Homepage video panel: the player itself ──
The panel shipped with a frame and a styled play button but nothing that
built a player, so these rules had no counterpart until 2026-08-11. home.js
creates the iframe on click rather than in the markup, so nothing is
requested from YouTube until someone asks for it.
Absolutely positioned inside the frame, which already owns the 16:9 box and
the poster image — the iframe fills that box rather than setting its own
size, so the video can never disagree with the frame it sits in. Same
arrangement the Technology carousel uses for its video slide. */
.vid-frame > iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
z-index: 6; /* above the play button, which sits at 5 */
}
/* The button is removed from play and from the accessibility tree by home.js;
hiding it here too means a hover cannot re-reveal it under the video. */
.vid-frame.is-playing .vid-play { opacity: 0; pointer-events: none; }
/* ═══════════════════════════════════════════════════════════
UPCOMING EVENTS — dedicated layout (2026-08-24)
Not the shared News/Publications teaser (.feed-teaser): that component
hides .feed-excerpt and .feed-dest outright, because they measured as
overflowing a one-viewport panel deck. This panel needs a real title,
description and a visible URL per entry, so it gets its own compact
scale instead. Scoped to .panel-upcoming-events only — none of this
reaches solenic.feed.css or the News/Publications panels.
═══════════════════════════════════════════════════════════ */
.panel-upcoming-events .panel-content.events-teaser {
max-width: none;
width: 100%;
padding: 0 var(--grid-inset, clamp(24px, 5vw, 64px));
}
.panel-upcoming-events .events-masthead {
padding: 0 0 clamp(14px, 2vh, 24px);
}
.panel-upcoming-events .events-masthead h1 {
font-family: var(--sol-sans);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 400;
color: var(--c-ink-strong);
margin: 0 0 0.5rem;
}
.panel-upcoming-events .events-lede {
font-size: 1.0625rem;
line-height: 1.5;
color: rgba(var(--c-ink-rgb), 0.82);
max-width: 58ch;
margin: 0;
}
.panel-upcoming-events .events-list {
display: flex;
flex-direction: column;
}
.panel-upcoming-events .event-item {
padding: clamp(10px, 1.4vh, 16px) 0;
border-bottom: 1px solid rgba(var(--c-ink-rgb), 0.09);
}
.panel-upcoming-events .event-item:last-child { border-bottom: 0; padding-bottom: 0; }
.panel-upcoming-events .event-meta {
font-family: 'Space Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(var(--c-ink-rgb), 0.68);
display: flex; flex-wrap: wrap; gap: 0.4em 0.75em;
margin: 0 0 0.5rem;
}
.panel-upcoming-events .event-meta .sep { color: rgba(var(--c-ink-rgb), 0.3); }
.panel-upcoming-events .event-title {
font-family: var(--sol-sans);
/* 2px above .event-desc's own 0.9375rem — this panel has no Text Size
control (it's outside the shared feed component), so this stays a
fixed relationship rather than one tied to --feed-scale. */
font-size: calc(0.9375rem + 2px);
font-weight: 500;
line-height: 1.28;
letter-spacing: -0.01em;
color: var(--c-ink-strong);
margin: 0 0 0.4rem;
}
.panel-upcoming-events .event-desc {
font-size: 0.9375rem;
line-height: 1.5;
color: rgba(var(--c-ink-rgb), 0.82);
max-width: 68ch;
margin: 0 0 0.5rem;
}
.panel-upcoming-events .event-url {
display: inline-flex;
align-items: center;
font-family: 'Space Mono', monospace;
font-size: 0.8125rem;
letter-spacing: 0.02em;
color: var(--c-accent);
text-decoration: none;
word-break: break-all;
}
.panel-upcoming-events .event-url:hover { text-decoration: underline; }
.panel-upcoming-events .event-url:focus-visible {
outline: 2px solid var(--c-accent);
outline-offset: 3px;
}
/* This panel is not in .panel-services, so it does not inherit that
selector's mobile "let the whole panel scroll" rule. Same technique
(established on Contact/Careers/Investors): a panel deck can't scroll
internally on desktop, but on a short mobile viewport there is no
alternative to fitting five fields x2 entries into one screen. */
@media (max-width: 991px) {
.panel-upcoming-events .panel-inner {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}