@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* Site-wide art direction: research-journal warmth meets dimensional data visualisation. */
body.art-direction {
  --ff: 'Manrope', Arial, sans-serif;
  --fd: 'Playfair Display', Georgia, serif;
  --fm: 'DM Mono', monospace;
  color: #143548;
  background:
    radial-gradient(circle at 90% 5%, rgba(92,219,211,.11), transparent 22%),
    linear-gradient(180deg, #fbfdfd 0%, #eef7f7 48%, #fbfdfd 100%);
}
body.art-direction::before {
  content: '';
  position: fixed;
  z-index: -1;
  top: 24%;
  left: -22vw;
  width: 48vw;
  height: 48vw;
  border: 1px solid rgba(21,151,157,.09);
  border-radius: 50%;
  box-shadow: 0 0 0 70px rgba(21,151,157,.025), 0 0 0 145px rgba(21,151,157,.018);
  pointer-events: none;
}
body.art-direction .site-nav {
  min-height: 78px;
  border-bottom: 1px solid rgba(135,229,220,.25);
  background: rgba(3,18,33,.82) !important;
  box-shadow: 0 15px 44px rgba(3,18,33,.18);
  backdrop-filter: blur(18px) saturate(125%);
}
body.art-direction .site-nav::before {
  content: 'GENOMICS / RESEARCH INTELLIGENCE';
  position: absolute;
  top: 50%;
  right: 4.5%;
  transform: translateY(-50%);
  color: rgba(142,242,231,.24);
  font: 500 8px var(--fm);
  letter-spacing: .13em;
  pointer-events: none;
}
body.art-direction .site-nav .nav-links a:not(.nav-cta) { font-size: 11px; letter-spacing: .04em; }
body.art-direction .site-nav .nav-cta {
  min-height: 38px;
  border: 1px solid rgba(159,247,238,.3);
  border-radius: 999px;
  background: linear-gradient(135deg, #5de3d6, #74efe0) !important;
  color: #06263c !important;
  box-shadow: 0 10px 24px rgba(85,231,218,.2);
}

/* A richer, more composed first impression. */
body.art-direction #hero-section {
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 16%, rgba(85,233,220,.19), transparent 24%),
    radial-gradient(circle at 88% 85%, rgba(106,103,230,.2), transparent 27%),
    linear-gradient(125deg, #020e1d 0%, #062541 54%, #0b3854 100%) !important;
}
body.art-direction #hero-section::before {
  opacity: .72;
  background-image: linear-gradient(rgba(134,239,228,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(134,239,228,.08) 1px, transparent 1px) !important;
  background-size: 46px 46px !important;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.7) 55%, transparent 100%);
}
.art-hero-orbit {
  position: absolute;
  z-index: 1;
  top: 15%;
  right: 6.5%;
  width: clamp(230px, 27vw, 430px);
  aspect-ratio: 1;
  border: 1px solid rgba(136,242,231,.25);
  border-radius: 50%;
  box-shadow: inset 0 0 0 34px rgba(105,225,216,.04), 0 0 0 38px rgba(90,230,217,.035), 0 0 0 78px rgba(90,230,217,.018);
  animation: artOrbit 18s linear infinite;
  pointer-events: none;
}
.art-hero-orbit::before, .art-hero-orbit::after { content: ''; position: absolute; border-radius: 50%; background: #8ef3e5; box-shadow: 0 0 20px #69e6d7; }
.art-hero-orbit::before { top: 4%; left: 47%; width: 7px; height: 7px; }
.art-hero-orbit::after { right: 12%; bottom: 22%; width: 5px; height: 5px; }
@keyframes artOrbit { to { transform: rotate(360deg); } }

body.art-direction .premium-page-hero { background: linear-gradient(122deg, #020c19 0%, #062440 53%, #0a3854 100%) !important; }
body.art-direction .premium-page-hero::before { background: radial-gradient(circle at 20% 14%, rgba(84,235,218,.2), transparent 24%), linear-gradient(90deg, rgba(3,10,23,.4), transparent 66%) !important; }
.art-page-orbit {
  position: absolute;
  z-index: 2;
  top: 18%;
  right: min(47vw, 740px);
  width: 110px;
  height: 110px;
  border: 1px solid rgba(132,241,230,.38);
  border-radius: 50%;
  opacity: .9;
  pointer-events: none;
}
.art-page-orbit::before { content: ''; position: absolute; inset: 17px; border: 1px dashed rgba(132,241,230,.42); border-radius: inherit; animation: artOrbit 15s linear infinite reverse; }

/* Every original section gains its own chapter-like composition. */
body.art-direction > section.sec.art-section { position: relative; overflow: hidden; padding: clamp(88px, 9vw, 132px) 0; }
body.art-direction > section.sec.art-section::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 5%;
  width: min(420px, 38vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(20,157,157,.6), transparent);
}
body.art-direction > section.sec.art-section::after {
  content: '';
  position: absolute;
  z-index: 0;
  right: -3%;
  bottom: -8%;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(11,76,102,.07);
  border-radius: 50%;
  pointer-events: none;
}
body.art-direction > section.sec.art-section:nth-of-type(odd) { background: linear-gradient(142deg, #f8fdfd 0%, #eef9f8 100%) !important; }
body.art-direction > section.sec.art-section:nth-of-type(even) { background: #fff !important; }
body.art-direction > section.sec.art-section .con { position: relative; z-index: 1; }
.art-section__number {
  position: absolute;
  top: -25px;
  right: 0;
  color: rgba(8,51,77,.055);
  font: 400 clamp(105px, 14vw, 190px)/.75 var(--fd);
  letter-spacing: -.09em;
  pointer-events: none;
}
body.art-direction .art-section .lbl { margin-bottom: 20px; color: #118e94; font-size: 10px; letter-spacing: .17em; }
body.art-direction .art-section .h2 { color: #0b3550; font-family: var(--fd); letter-spacing: -.045em; }
body.art-direction .art-section .h2 em { color: #169da0; }
body.art-direction .art-section .h2 + p { color: #637d87 !important; }

/* Existing service, team, FAQ and resource cards become tactile editorial objects. */
body.art-direction .art-card {
  border: 1px solid rgba(27,99,119,.13) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(239,249,248,.92)) !important;
  box-shadow: 0 18px 42px rgba(11,63,84,.08) !important;
  transition: transform .35s var(--ease, ease), box-shadow .35s var(--ease, ease), border-color .35s var(--ease, ease) !important;
}
@media (hover:hover) {
  body.art-direction .art-card:hover { transform: translateY(-10px) !important; border-color: rgba(23,166,163,.42) !important; box-shadow: 0 28px 56px rgba(8,67,90,.16) !important; }
}
body.art-direction .art-card h3 { color: #103d55 !important; font-family: var(--fd) !important; font-weight: 500 !important; letter-spacing: -.025em !important; }
body.art-direction .art-card p { color: #617b85 !important; }
body.art-direction .art-card [style*='font-size:30px'], body.art-direction .art-card [style*='font-size:32px'] { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 15px; background: rgba(90,227,216,.14); }
body.art-direction .art-card img { transition: transform .7s var(--ease, ease), filter .5s ease; }
body.art-direction .art-card:hover img { transform: scale(1.055); filter: saturate(1.12); }

/* Shared elevated detail work. */
body.art-direction .premium-journal-bar { border-top: 1px solid rgba(102,232,219,.35); background: linear-gradient(90deg, #e6f7f5, #f6fffe, #e8f8f6); }
body.art-direction .premium-journal-item strong { color: #0a5365; }
body.art-direction .premium-spotlight { border-top: 1px solid rgba(105,237,225,.22); border-bottom: 1px solid rgba(105,237,225,.16); }
body.art-direction .premium-spotlight-visual, body.art-direction .premium-index-image { border-radius: 5px 94px 5px 5px; box-shadow: 0 38px 86px rgba(1,20,36,.36); }
body.art-direction .premium-outcomes { border-radius: 18px; }
body.art-direction .premium-index-points { border-radius: 15px; }
body.art-direction > section.sec.art-section.premium-testimonials {
  border-top: 1px solid rgba(160,245,238,.42);
  border-bottom: 1px solid rgba(141,208,255,.28);
  background:
    radial-gradient(circle at 12% 84%, rgba(117,240,223,.29), transparent 28%),
    radial-gradient(circle at 86% 13%, rgba(112,154,255,.3), transparent 31%),
    linear-gradient(125deg, #075d6c 0%, #0b486a 52%, #173263 100%) !important;
}
body.art-direction .ebook-showcase, body.art-direction .ebook-home-band, body.art-direction .ebook-blog-band { box-shadow: 0 32px 80px rgba(2,22,38,.18); }

/* Footer closes with the same publication-grade polish. */
body.art-direction .site-footer { position: relative; overflow: hidden; border-top: 1px solid rgba(117,235,222,.22); background: linear-gradient(130deg, #031525, #072842 54%, #052039) !important; }
body.art-direction .site-footer::before { content: 'GENEOMICS'; position: absolute; top: -18px; right: -2%; color: rgba(128,241,229,.045); font: 400 clamp(90px,17vw,250px)/1 var(--fd); letter-spacing: -.08em; pointer-events: none; }
.art-footer-sigil { display: flex; align-items: center; gap: 10px; margin: 0 0 35px; color: rgba(155,246,236,.6); font: 500 9px var(--fm); letter-spacing: .15em; text-transform: uppercase; }
.art-footer-sigil::before { content: ''; width: 36px; height: 1px; background: currentColor; }

@media (max-width: 900px) {
  body.art-direction .site-nav::before { display: none; }
  .art-page-orbit { right: 44vw; }
  .art-section__number { top: -10px; }
}
@media (max-width: 600px) {
  body.art-direction > section.sec.art-section { padding: 72px 0; }
  .art-hero-orbit { top: 20%; right: -17%; width: 235px; }
  .art-page-orbit { display: none; }
  .art-section__number { right: 20px; font-size: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .art-hero-orbit, .art-page-orbit::before { animation: none; }
  body.art-direction .art-card, body.art-direction .art-card img { transition: none !important; }
}

/* Final composition refinements: give the key conversion points a deliberate frame. */
body.art-direction .site-nav {
  top: 14px !important;
  right: clamp(12px, 2.9vw, 48px) !important;
  left: clamp(12px, 2.9vw, 48px) !important;
  width: auto !important;
  border: 1px solid rgba(135,229,220,.24) !important;
  border-radius: 18px !important;
  overflow: hidden;
}
body.art-direction .site-nav::before { content: none !important; display: none !important; }
body.art-direction .site-nav .nav-links a:not(.nav-cta),
body.art-direction .site-nav .nav-cta { font-weight: 700 !important; }

/* Turn the former empty space in the 5-day panel into a compact research timeline. */
body.art-direction .refine-why-panel > div[style*='font-size:44px'] {
  margin-bottom: 16px !important;
  padding-bottom: 0 !important;
}
.refine-journey {
  position: relative;
  display: flex;
  flex: 1 1 142px;
  min-height: 142px;
  flex-direction: column;
  justify-content: center;
  padding: 15px 17px 17px;
  margin: 0 0 20px;
  border: 1px solid rgba(130,240,226,.18);
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(95,230,214,.13), rgba(73,129,205,.09));
  overflow: hidden;
}
.refine-journey::before {
  content: '';
  position: absolute;
  right: 9%;
  bottom: 34px;
  left: 9%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(134,245,231,.72) 12%, rgba(134,245,231,.72) 88%, transparent);
}
.refine-journey__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 17px;
  color: rgba(212,255,250,.7);
  font: 500 8px/1 var(--fm);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.refine-journey__label b { color: #89f3e7; font-weight: 500; }
.refine-journey__steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.refine-journey__steps span { min-width: 0; color: rgba(226,255,251,.68); font: 400 8px/1.35 var(--fm); letter-spacing: .02em; }
.refine-journey__steps b {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  margin-bottom: 7px;
  border: 1px solid rgba(143,245,231,.74);
  border-radius: 50%;
  background: #0a3651;
  color: #aaf8ef;
  font: 500 7px/1 var(--fm);
  box-shadow: 0 0 0 4px rgba(89,226,211,.07), 0 0 16px rgba(80,227,211,.16);
}
.refine-journey__steps span:last-child b { background: #8ef2e5; color: #063049; box-shadow: 0 0 0 4px rgba(142,242,229,.12), 0 0 19px rgba(142,242,229,.32); }
.refine-journey__steps i { display: block; max-width: 58px; font-style: normal; }

/* Keep the six deliverables comfortably inside the editorial page frame. */
body.art-direction .premium-deliver .rs.refine-deliver-grid {
  margin-right: clamp(34px, 7vw, 118px) !important;
  margin-left: clamp(34px, 7vw, 118px) !important;
  border: 1px solid rgba(27,109,126,.16);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 54px rgba(7,60,78,.08);
}

/* Keep the two comparison links clearly visible between the delivery grid and testimonials. */
body.art-direction .refine-deliver-links {
  position: relative !important;
  z-index: 8 !important;
  margin-top: 28px !important;
  margin-bottom: 64px !important;
  padding: 12px 0;
}
body.art-direction .refine-deliver-links a { position: relative; z-index: 1; }

/* Make the free tool feel intentionally inset from the Service page edges. */
/* Keep the 16S / Shotgun tool in its original compact, in-flow form. */
body.art-direction .premium-free-tool-card {
  margin: 36px 0 0 !important;
  padding: 32px 36px !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}

/* The interactive tool is framed as its own inset module, rather than only adding margin to its card. */
.refine-tool-section {
  position: relative;
  margin: 50px clamp(32px, 5.5vw, 88px) 0;
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid rgba(28,124,140,.15);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(218,246,244,.78), rgba(240,251,250,.88));
  box-shadow: 0 24px 54px rgba(8,65,84,.08);
}
body.art-direction .refine-tool-section .refine-deseq-tool {
  width: 100%;
  margin: 0 !important;
  border: 1px solid rgba(143,244,231,.17);
}

/* A named feedback marker makes the testimonial area read as a real researcher perspective. */
.refine-feedback-index {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 26px;
  padding: 8px 13px;
  border: 1px solid rgba(154,246,235,.24);
  border-radius: 999px;
  background: rgba(100,234,220,.08);
  color: #a5f5e9;
  font: 500 9px/1 var(--fm);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.refine-feedback-index b { color: #fff; font-weight: 500; }
.refine-feedback-index i { width: 24px; height: 1px; background: currentColor; opacity: .65; }

/* Contact channels remain available, while their displayed details cannot be selected or copied. */
.contact-channel-detail {
  display: block;
  margin-top: 12px;
  color: #55717d;
  font: 500 10px/1.35 var(--fm);
  letter-spacing: .035em;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}
.contact-email-button, .contact-whatsapp-button { margin-bottom: 0 !important; }
.contact-protected-detail {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

@media (max-width: 600px) {
  body.art-direction .site-nav { top: 8px !important; right: 8px !important; left: 8px !important; border-radius: 14px !important; }
  .refine-journey { min-height: 132px; padding: 14px; }
  .refine-journey__steps i { max-width: 52px; }
  body.art-direction .premium-deliver .rs.refine-deliver-grid { margin-right: 14px !important; margin-left: 14px !important; border-radius: 18px; }
  body.art-direction .refine-deliver-links { margin-top: 20px !important; margin-bottom: 48px !important; padding: 8px 16px; }
  .refine-tool-section { margin: 32px 0 0; padding: 12px; border-radius: 20px; }
  body.art-direction .refine-tool-section .refine-deseq-tool { margin: 0 !important; }
}