/* ============================================================
   GENE COMPASS — Botanical / Organic Serif design system
   Tokens → primitives → components → page modules
   ============================================================ */

:root{
  /* Color tokens */
  --bg:        #F9F8F4;   /* warm alabaster */
  --ink:       #2D3A31;   /* deep forest */
  --ink-soft:  #55645A;   /* muted forest for body copy */
  --sage:      #8C9A84;
  --sage-deep: #6E7F66;
  --clay:      #DCCFC2;
  --clay-bg:   #F2F0EB;
  --stone:     #E6E2DA;
  --terra:     #C27B66;
  --terra-deep:#A65F4B;
  --gold:      #C0A878;   /* echoes the logo mark */
  --white:     #FFFFFF;

  /* Shadows */
  --sh-sm: 0 4px 6px -1px rgba(45,58,49,.05);
  --sh-md: 0 10px 15px -3px rgba(45,58,49,.05);
  --sh-lg: 0 20px 40px -10px rgba(45,58,49,.07);
  --sh-xl: 0 25px 50px -12px rgba(45,58,49,.15);

  /* Type */
  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --mono:  "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:var(--sans);
  font-size:1.0625rem; line-height:1.7;
  color:var(--ink-soft);
  background:var(--bg);
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100% }
a{ color:var(--sage-deep); text-decoration:none; transition:color .3s var(--ease-out) }
a:hover{ color:var(--terra) }
::selection{ background:var(--sage); color:var(--white) }
:focus-visible{ outline:2px solid var(--sage); outline-offset:3px; border-radius:4px }

h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); font-weight:600; line-height:1.12; letter-spacing:-.01em }
h1{ font-size:clamp(2.7rem, 6.2vw, 4.9rem) }
h2{ font-size:clamp(2rem, 4.2vw, 3.3rem) }
h3{ font-size:clamp(1.35rem, 2.2vw, 1.75rem) }
h1 em, h2 em, h3 em, .em{ font-style:italic; font-weight:600; color:var(--terra) }
p+p{ margin-top:1em }
strong{ color:var(--ink); font-weight:600 }

/* ---------- Paper grain (mandatory) ---------- */
.grain{
  pointer-events:none; position:fixed; inset:0; z-index:90; opacity:.015;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-repeat:repeat;
}

/* ---------- Layout primitives ---------- */
.wrap{ max-width:1200px; margin-inline:auto; padding-inline:clamp(20px,5vw,40px) }
.section{ padding-block:clamp(64px,9vw,128px) }
.section-tight{ padding-block:clamp(48px,6vw,80px) }
.center{ text-align:center }
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sage-deep); margin-bottom:1.2rem;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--sage) }
.center .eyebrow::after{ content:""; width:34px; height:1px; background:var(--sage) }
.lead{ font-size:clamp(1.1rem,1.6vw,1.3rem); line-height:1.75; color:var(--ink-soft); max-width:62ch }
.center .lead{ margin-inline:auto }
.section-head{ max-width:760px; margin-bottom:clamp(40px,5vw,72px) }
.section-head.center{ margin-inline:auto }
.note{ font-size:.92rem; color:var(--ink-soft) }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--sans); font-size:.82rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  border-radius:999px; padding:1.05em 2.2em; min-height:48px;
  border:1px solid transparent; cursor:pointer;
  transition:background-color .3s var(--ease-out), color .3s var(--ease-out),
             border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.btn svg{ width:1.05em; height:1.05em; transition:transform .3s var(--ease-out) }
.btn:hover svg{ transform:translateX(4px) }
.btn-primary{ background:var(--ink); color:var(--white) }
.btn-primary:hover{ background:var(--terra); color:var(--white); transform:translateY(-2px); box-shadow:var(--sh-md) }
.btn-outline{ background:transparent; border-color:var(--sage); color:var(--sage-deep) }
.btn-outline:hover{ border-color:var(--terra); color:var(--terra); transform:translateY(-2px) }
.btn-ghost{ background:transparent; color:var(--ink); padding-inline:.4em }
.btn-ghost:hover{ color:var(--terra) }

/* ---------- Navigation ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  background:rgba(249,248,244,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.nav.scrolled{ border-bottom-color:var(--stone); box-shadow:var(--sh-sm) }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:84px }
.brand{ display:flex; align-items:center; gap:.7rem; color:var(--ink) }
.brand:hover{ color:var(--ink) }
.brand-mark{ width:40px; height:40px; flex:none }
img.brand-mark{ border-radius:12px; object-fit:cover }
.brand-name{ font-family:var(--serif); font-size:1.35rem; font-weight:600; letter-spacing:.01em }
.brand-name i{ color:var(--sage-deep) }
.nav-links{ display:flex; align-items:center; gap:clamp(.9rem,1.8vw,1.9rem) }
.nav-links a:not(.btn){
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); padding:.4em 0; position:relative;
}
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--terra); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.nav-links a:not(.btn):hover{ color:var(--ink) }
.nav-links a:not(.btn):hover::after{ transform:scaleX(1) }
.nav-links a:not(.btn)[aria-current="page"]{ color:var(--ink) }
.nav-links a:not(.btn)[aria-current="page"]::after{ transform:scaleX(1); background:var(--sage) }
.nav-links a.btn-primary[aria-current="page"]{ color:var(--white) } /* keep label visible on its own bubble */
.nav .btn{ padding:.75em 1.6em; min-height:0 }
.hamburger{
  display:none; background:none; border:0; color:var(--ink); cursor:pointer;
  width:44px; height:44px; align-items:center; justify-content:center; border-radius:50%;
}
.hamburger svg{ width:26px; height:26px }

/* Mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:85;
  background:rgba(249,248,244,.97); backdrop-filter:blur(8px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility 0s linear .5s;
}
body.menu-open .mobile-menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s }
body.menu-open{ overflow:hidden }
.mobile-menu a:not(.btn){
  font-family:var(--serif); font-size:1.7rem; color:var(--ink);
}
.mobile-menu a:not(.btn):hover{ color:var(--terra); font-style:italic }
.mobile-close{
  position:absolute; top:22px; right:24px; background:none; border:0; cursor:pointer;
  color:var(--ink); width:44px; height:44px;
}
.mobile-close svg{ width:28px; height:28px }
@media (max-width: 900px){
  .nav-links{ display:none }
  .hamburger{ display:inline-flex }
}

/* ---------- Hero ---------- */
.hero{ padding-top:clamp(140px,18vh,190px); padding-bottom:clamp(64px,8vw,110px); position:relative }
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(40px,6vw,88px); align-items:center }
@media (max-width: 900px){ .hero-grid{ grid-template-columns:1fr } }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem }
.hero p.lead{ margin-top:1.6rem }
.hero-foot{ display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:2.6rem; font-size:.92rem; color:var(--ink-soft) }
.hero-foot span{ display:inline-flex; align-items:center; gap:.55em }
.hero-foot svg{ width:18px; height:18px; color:var(--sage-deep) }

/* Arch visual */
.arch{
  position:relative; border-radius:200px 200px 32px 32px;
  background:linear-gradient(165deg,#E9E4D8 0%, #DCE0D4 45%, #C9D2C2 100%);
  border:1px solid var(--stone); box-shadow:var(--sh-lg);
}
.hero-arch{ aspect-ratio:3/4; max-height:600px; margin-inline:auto; width:min(100%,460px) }
.arch-inner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center }

/* Floating chips on hero */
.float-chip{
  position:absolute; background:rgba(255,255,255,.85); backdrop-filter:blur(4px);
  border:1px solid var(--stone); border-radius:18px; box-shadow:var(--sh-md);
  padding:.8rem 1.1rem; font-size:.82rem; line-height:1.35; color:var(--ink-soft);
  animation:floaty 6.5s ease-in-out infinite;
}
.float-chip b{ display:block; font-family:var(--serif); font-size:1.18rem; font-weight:700; color:var(--ink) }
.float-chip.c1{ top:14%; left:-7%; animation-delay:0s }
.float-chip.c2{ bottom:22%; right:-8%; animation-delay:-3s }
.float-chip.c3{ bottom:-4%; left:6%; animation-delay:-6s }
@media (max-width:1080px){ .float-chip.c1{ left:0 } .float-chip.c2{ right:0 } }
@keyframes floaty{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-13px) }
}

/* DNA helix */
.helix{ width:64%; height:84%; overflow:visible }
.helix .strand{
  fill:none; stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:6 10; animation:strandflow 11s linear infinite;
}
.helix .s1{ stroke:var(--sage-deep) }
.helix .s2{ stroke:var(--gold); animation-direction:reverse }
.helix .rung{ stroke:var(--ink); stroke-width:2; opacity:.34; stroke-linecap:round }
.helix-drift{ animation:helixdrift 8s ease-in-out infinite }
@keyframes strandflow{ to{ stroke-dashoffset:-320 } }
@keyframes helixdrift{ 0%,100%{ transform:translateY(0) rotate(0deg) } 50%{ transform:translateY(-14px) rotate(1.2deg) } }

/* ---------- Gene marquee ---------- */
.marquee{
  border-block:1px solid var(--stone); padding-block:1.15rem; overflow:hidden;
  background:var(--clay-bg);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 28s linear infinite; gap:0 }
.marquee:hover .marquee-track{ animation-play-state:paused }
.marquee span{
  font-family:var(--serif); font-style:italic; font-size:1.02rem; color:var(--sage-deep);
  white-space:nowrap; padding-inline:1.3rem; display:inline-flex; align-items:center; gap:2.6rem;
}
.marquee span::after{ content:"✦"; font-size:.6rem; color:var(--terra); font-style:normal }
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* ---------- Cards ---------- */
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,32px) }
.cards-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,32px) }
@media (max-width:900px){ .cards-3,.cards-2{ grid-template-columns:1fr } }
.card{
  background:var(--white); border:1px solid var(--stone); border-radius:24px;
  padding:clamp(26px,3vw,40px); box-shadow:var(--sh-sm);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg) }
.card-clay{ background:var(--clay-bg) }
.card h3{ margin-block:.9rem .6rem }
.card .icon-pebble{
  width:58px; height:58px; border-radius:50%;
  background:var(--clay-bg); border:1px solid var(--stone);
  display:flex; align-items:center; justify-content:center; color:var(--sage-deep);
}
.card:hover .icon-pebble{ background:var(--sage); color:var(--white); transition:background .5s var(--ease-out), color .5s var(--ease-out) }
.icon-pebble svg{ width:26px; height:26px; stroke-width:1.5 }
.card-link{
  display:inline-flex; align-items:center; gap:.5em; margin-top:1.1rem;
  font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.card-link svg{ width:1em; height:1em; transition:transform .3s var(--ease-out) }
.card-link:hover{ color:var(--terra) }
.card-link:hover svg{ transform:translateX(4px) }
/* staggered rhythm */
@media (min-width:900px){
  .stagger > *:nth-child(even){ transform:translateY(48px) }
  .stagger > *:nth-child(even):hover{ transform:translateY(42px) }
  .stagger{ margin-bottom:48px }
}

/* ---------- Stats band ---------- */
.stats{ background:var(--ink); color:#E8E5DC; border-radius:40px; padding:clamp(40px,5vw,72px) }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center }
@media (max-width:900px){ .stats-grid{ grid-template-columns:repeat(2,1fr) } }
.stat b{
  display:block; font-family:var(--serif); font-weight:700;
  font-size:clamp(2.1rem,3.6vw,3.2rem); color:var(--white); line-height:1.1;
}
.stat b .unit{ color:var(--gold); font-style:italic; font-weight:600 }
.stat span{ display:block; margin-top:.45rem; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:#A7B2A0 }

/* ---------- Quote band ---------- */
.quote-band{ position:relative; text-align:center; max-width:880px; margin-inline:auto }
.quote-band blockquote{
  font-family:var(--serif); font-size:clamp(1.6rem,3.2vw,2.5rem); font-weight:500;
  line-height:1.4; color:var(--ink); font-style:italic;
}
.quote-band cite{ display:block; margin-top:1.6rem; font-family:var(--sans); font-style:normal; font-size:.82rem; letter-spacing:.2em; text-transform:uppercase; color:var(--sage-deep) }
.leaf-divider{ width:54px; margin:0 auto 1.8rem; color:var(--sage) }

/* ---------- Meander line divider ---------- */
.meander{ display:block; width:100%; max-width:560px; margin:clamp(36px,5vw,64px) auto; color:var(--sage); opacity:.6 }

/* ---------- Steps (how it works) ---------- */
.steps{ display:grid; gap:clamp(40px,6vw,84px) }
.step{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(28px,5vw,72px); align-items:center }
.step:nth-child(even){ direction:rtl }
.step:nth-child(even) > *{ direction:ltr }
@media (max-width:900px){ .step, .step:nth-child(even){ grid-template-columns:1fr; direction:ltr } }
.step-num{
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(3.4rem,7vw,5.6rem); line-height:1; color:var(--clay);
}
.step h3{ font-size:clamp(1.6rem,2.6vw,2.2rem); margin-block:.5rem .9rem }
.step-visual{
  border-radius:32px; border:1px solid var(--stone); background:var(--white);
  box-shadow:var(--sh-md); padding:clamp(20px,2.5vw,32px); overflow:hidden;
}
.step-visual.arch-vis{ border-radius:160px 160px 28px 28px; background:linear-gradient(165deg,#EFEAE0,#DCE0D4) }

/* raw-data snippet */
.raw{
  font-family:var(--mono); font-size:.8rem; line-height:1.9; color:var(--ink);
  background:var(--clay-bg); border:1px solid var(--stone); border-radius:18px; padding:1.4rem 1.6rem;
  overflow-x:auto; white-space:pre;
}
.raw .dim{ color:#9AA294 }
.raw .hl{ color:var(--terra); font-weight:600 }

/* ---------- Timeline (story) ---------- */
.timeline{ position:relative; margin-top:2.5rem; padding-left:2.4rem }
.timeline::before{
  content:""; position:absolute; left:8px; top:6px; bottom:6px; width:1px;
  background:linear-gradient(var(--sage) 60%, transparent);
}
.tl-item{ position:relative; padding-bottom:2.6rem }
.tl-item:last-child{ padding-bottom:0 }
.tl-item::before{
  content:""; position:absolute; left:-2.4rem; top:.42em; width:17px; height:17px;
  margin-left:.5px; border-radius:50% 50% 50% 4px; background:var(--bg);
  border:2px solid var(--sage); transform:rotate(45deg);
}
.tl-item.hot::before{ background:var(--terra); border-color:var(--terra) }
.tl-date{ font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--sage-deep) }
.tl-item h3{ margin-block:.35rem .45rem }

/* ---------- Dashboard demo ---------- */
.demo-note{
  display:flex; gap:.8rem; align-items:flex-start;
  background:var(--clay-bg); border:1px solid var(--stone); border-left:3px solid var(--gold);
  border-radius:16px; padding:1.1rem 1.4rem; font-size:.95rem; max-width:760px;
}
.demo-note svg{ width:20px; height:20px; flex:none; margin-top:.2em; color:var(--gold) }

.dash{
  background:var(--white); border:1px solid var(--stone); border-radius:28px;
  box-shadow:var(--sh-xl); overflow:hidden;
}
.dash-bar{
  display:flex; align-items:center; gap:1rem; padding:1rem 1.5rem;
  background:var(--clay-bg); border-bottom:1px solid var(--stone);
}
.dash-dots{ display:flex; gap:7px }
.dash-dots i{ width:11px; height:11px; border-radius:50% }
.dash-dots i:nth-child(1){ background:var(--terra) }
.dash-dots i:nth-child(2){ background:var(--gold) }
.dash-dots i:nth-child(3){ background:var(--sage) }
.dash-url{
  flex:1; text-align:center; font-size:.8rem; color:var(--ink-soft);
  background:var(--white); border:1px solid var(--stone); border-radius:999px; padding:.35em 1em;
  max-width:380px; margin-inline:auto;
}
.dash-body{ padding:clamp(20px,3vw,40px) }
.dash-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem; margin-bottom:1.8rem }
.dash-id{ display:flex; align-items:center; gap:1rem }
.avatar{
  width:54px; height:54px; border-radius:50%; flex:none;
  background:var(--sage); color:var(--white);
  font-family:var(--serif); font-size:1.25rem; font-style:italic;
  display:flex; align-items:center; justify-content:center;
}
.dash-id b{ display:block; font-family:var(--serif); font-size:1.3rem; color:var(--ink); line-height:1.2 }
.dash-id small{ font-size:.83rem; color:var(--ink-soft) }
.badge-demo{
  font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  background:var(--gold); color:var(--white); padding:.35em .9em; border-radius:999px;
}

/* tabs */
.tabs{ display:flex; flex-wrap:wrap; gap:.5rem; border-bottom:1px solid var(--stone); margin-bottom:1.8rem }
.tab{
  background:none; border:0; cursor:pointer; font-family:var(--sans);
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); padding:.8em 1.1em; border-bottom:2px solid transparent;
  transition:color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.tab:hover{ color:var(--ink) }
.tab.active{ color:var(--ink); border-bottom-color:var(--terra) }
.panel{ display:none; animation:panelin .6s var(--ease-out) }
.panel.active{ display:block }
@keyframes panelin{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

/* score rings */
.rings{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-bottom:2rem }
@media (max-width:900px){ .rings{ grid-template-columns:repeat(2,1fr) } }
.ring-card{
  text-align:center; background:var(--clay-bg); border:1px solid var(--stone);
  border-radius:20px; padding:1.5rem 1rem 1.3rem;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.ring-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md) }
.ring{ width:104px; height:104px; margin:0 auto .8rem; position:relative }
.ring svg{ transform:rotate(-90deg) }
.ring .track{ fill:none; stroke:var(--stone); stroke-width:7 }
.ring .meter{
  fill:none; stroke:var(--sage-deep); stroke-width:7; stroke-linecap:round;
  stroke-dasharray:289; stroke-dashoffset:289;
  transition:stroke-dashoffset 1.6s var(--ease-out);
}
.ring.terra .meter{ stroke:var(--terra) }
.ring.gold .meter{ stroke:var(--gold) }
.ring-val{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:1.5rem; font-weight:700; color:var(--ink);
}
.ring-card b{ display:block; font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink) }
.ring-card small{ font-size:.78rem; color:var(--ink-soft) }

/* trait cards */
.traits{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem }
@media (max-width:1000px){ .traits{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .traits{ grid-template-columns:1fr } }
.trait{
  background:var(--white); border:1px solid var(--stone); border-radius:18px; padding:1.3rem 1.4rem;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.trait:hover{ transform:translateY(-4px); box-shadow:var(--sh-md) }
.trait-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:.8rem; margin-bottom:.55rem }
.trait h4{ font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--ink) }
.trait .gene{
  font-family:var(--mono); font-size:.72rem; color:var(--sage-deep);
  background:var(--clay-bg); border:1px solid var(--stone); padding:.2em .65em; border-radius:999px; white-space:nowrap;
}
.trait p{ font-size:.9rem; line-height:1.55 }
.meter-line{ height:6px; border-radius:999px; background:var(--clay-bg); margin-top:.9rem; overflow:hidden }
.meter-line i{
  display:block; height:100%; border-radius:999px; background:var(--sage-deep);
  width:0; transition:width 1.4s var(--ease-out);
}
.meter-line.terra i{ background:var(--terra) }
.meter-line.gold i{ background:var(--gold) }
.trait-scale{ display:flex; justify-content:space-between; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:#9AA294; margin-top:.4rem }

/* impact chips */
.chip{
  display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.32em .85em; border-radius:999px; white-space:nowrap;
}
.chip-high{ background:rgba(194,123,102,.16); color:var(--terra-deep) }
.chip-act{  background:rgba(192,168,120,.2);  color:#8A6F45 }
.chip-good{ background:rgba(140,154,132,.2);  color:var(--sage-deep) }
.chip-info{ background:var(--clay-bg); color:var(--ink-soft); border:1px solid var(--stone) }

/* gene table */
.table-tools{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; margin-bottom:1.1rem }
.search{
  flex:1; min-width:220px; display:flex; align-items:center; gap:.6rem;
  background:var(--clay-bg); border:1px solid var(--stone); border-radius:999px; padding:.6em 1.2em;
  transition:border-color .3s var(--ease-out);
}
.search:focus-within{ border-color:var(--sage) }
.search svg{ width:17px; height:17px; color:var(--sage-deep); flex:none }
.search input{
  border:0; background:none; outline:none; width:100%;
  font-family:var(--sans); font-size:.95rem; color:var(--ink);
}
.filter-chip{
  background:none; border:1px solid var(--stone); border-radius:999px; cursor:pointer;
  font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); padding:.5em 1.1em;
  transition:all .3s var(--ease-out);
}
.filter-chip:hover{ border-color:var(--sage); color:var(--ink) }
.filter-chip.active{ background:var(--ink); border-color:var(--ink); color:var(--white) }
.table-wrap{ overflow-x:auto; border:1px solid var(--stone); border-radius:18px }
table.genes{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:680px }
table.genes th{
  text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sage-deep); background:var(--clay-bg); padding:.9em 1.2em; border-bottom:1px solid var(--stone);
}
table.genes td{ padding:.95em 1.2em; border-bottom:1px solid var(--stone); vertical-align:top }
table.genes tr:last-child td{ border-bottom:0 }
table.genes tbody tr{ transition:background .3s var(--ease-out) }
table.genes tbody tr:hover{ background:var(--clay-bg) }
table.genes .g{ font-weight:600; color:var(--ink) }
table.genes .snp{ font-family:var(--mono); font-size:.78rem; color:var(--ink-soft) }
.genotype{
  font-family:var(--mono); font-size:.82rem; font-weight:700; color:var(--ink);
  background:var(--clay-bg); border:1px solid var(--stone); border-radius:8px; padding:.18em .6em;
}
.empty-row td{ text-align:center; color:#9AA294; font-style:italic; padding:2em }

/* protocol checklist */
.protocol{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem }
@media (max-width:760px){ .protocol{ grid-template-columns:1fr } }
.proto-item{
  display:flex; gap:.9rem; align-items:flex-start; background:var(--white);
  border:1px solid var(--stone); border-radius:16px; padding:1rem 1.2rem; cursor:pointer;
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.proto-item:hover{ transform:translateY(-3px); box-shadow:var(--sh-sm) }
.proto-check{
  width:24px; height:24px; flex:none; margin-top:.15em; border-radius:50%;
  border:1.5px solid var(--sage); display:flex; align-items:center; justify-content:center;
  color:transparent; transition:all .35s var(--ease-out);
}
.proto-check svg{ width:13px; height:13px }
.proto-item.done .proto-check{ background:var(--sage-deep); border-color:var(--sage-deep); color:var(--white) }
.proto-item.done b{ text-decoration:line-through; text-decoration-color:var(--sage); text-decoration-thickness:1px; color:var(--ink-soft) }
.proto-item b{ display:block; font-size:.97rem; color:var(--ink); font-weight:600 }
.proto-item small{ font-size:.82rem; color:var(--ink-soft); line-height:1.45; display:block }

/* ---------- Reports ---------- */
.report-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem }
@media (max-width:820px){ .report-grid{ grid-template-columns:1fr } }
.report-card{
  display:flex; gap:1.3rem; align-items:flex-start;
  background:var(--white); border:1px solid var(--stone); border-radius:20px; padding:1.5rem 1.6rem;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out);
}
.report-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:var(--sage) }
.report-num{
  font-family:var(--serif); font-style:italic; font-weight:600; font-size:2rem;
  color:var(--clay); line-height:1; flex:none; min-width:2ch;
  transition:color .5s var(--ease-out);
}
.report-card:hover .report-num{ color:var(--terra) }
.report-card b{ display:block; font-family:var(--serif); font-size:1.18rem; font-weight:600; color:var(--ink); margin-bottom:.3rem }
.report-card p{ font-size:.9rem; line-height:1.55 }

/* excerpt document */
.doc{
  background:var(--white); border:1px solid var(--stone); border-radius:24px;
  box-shadow:var(--sh-lg); padding:clamp(28px,4vw,56px); position:relative; overflow:hidden;
}
.doc::before{
  content:""; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--sage), var(--gold), var(--terra));
}
.doc-kicker{ font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--sage-deep) }
.doc h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin-block:.5rem 1rem }
.doc .doc-meta{ font-size:.83rem; color:#9AA294; margin-bottom:1.4rem }
.action-box{
  background:var(--clay-bg); border:1px solid var(--stone); border-left:3px solid var(--sage-deep);
  border-radius:14px; padding:1.2rem 1.5rem; margin-top:1.5rem; font-size:.95rem;
}
.action-box b{ display:block; font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--sage-deep); margin-bottom:.5rem }
.action-box ul{ margin:0; padding-left:1.1em }
.action-box li{ margin-block:.3em }
.legend{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; font-size:.85rem }

/* ---------- FAQ accordion ---------- */
.accordion{ max-width:820px; margin-inline:auto }
.acc-item{ border-bottom:1px solid var(--stone) }
.acc-head{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; justify-content:space-between; align-items:center; gap:1.5rem;
  padding:1.6rem .2rem; font-family:var(--serif); font-size:clamp(1.12rem,1.8vw,1.38rem);
  font-weight:600; color:var(--ink); transition:color .3s var(--ease-out);
}
.acc-head:hover{ color:var(--terra) }
.acc-head .acc-icon{
  width:34px; height:34px; flex:none; border-radius:50%;
  border:1px solid var(--sage); color:var(--sage-deep);
  display:flex; align-items:center; justify-content:center;
  transition:transform .5s var(--ease-out), background .5s var(--ease-out), color .5s var(--ease-out);
}
.acc-icon svg{ width:15px; height:15px }
.acc-item.open .acc-icon{ transform:rotate(45deg); background:var(--sage); color:var(--white) }
.acc-body{
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .6s var(--ease-out), opacity .5s var(--ease-out);
}
.acc-item.open .acc-body{ opacity:1 }
.acc-body-inner{ padding:0 .2rem 1.7rem; max-width:64ch }

/* ---------- Forms ---------- */
.form-grid{ display:grid; gap:1.5rem }
.field label{
  display:block; font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sage-deep); margin-bottom:.5rem;
}
.field input, .field textarea, .field select{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--clay-bg); border:1px solid var(--stone); border-radius:16px;
  padding:.95em 1.3em; outline:none; transition:border-color .4s var(--ease-out), background .4s var(--ease-out);
  appearance:none;
}
.field textarea{ min-height:160px; resize:vertical; border-radius:20px }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--sage); background:var(--white) }
.field ::placeholder{ color:#A9AFA3 }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr } }

/* ---------- CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden; text-align:center;
  background:var(--ink); color:#D8DDD2; border-radius:40px;
  padding:clamp(56px,8vw,104px) clamp(24px,5vw,64px);
}
.cta-band h2{ color:var(--white) }
.cta-band h2 em{ color:var(--gold) }
.cta-band .lead{ color:#B9C2B2; margin:1.2rem auto 2.2rem }
.cta-band .btn-primary{ background:var(--bg); color:var(--ink) }
.cta-band .btn-primary:hover{ background:var(--terra); color:var(--white) }
.cta-band .btn-outline{ border-color:#5A6A5E; color:#C9D1C3 }
.cta-band .btn-outline:hover{ border-color:var(--gold); color:var(--gold) }
.cta-vine{ position:absolute; opacity:.1; color:var(--sage); pointer-events:none }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--stone); margin-top:clamp(48px,7vw,96px) }
.foot-inner{ padding-block:clamp(40px,6vw,72px); display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem }
@media (max-width:820px){ .foot-inner{ grid-template-columns:1fr } }
.foot-brand p{ font-size:.93rem; max-width:36ch; margin-top:1rem }
.foot-col b{ display:block; font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); margin-bottom:1rem }
.foot-col a{ display:block; font-size:.95rem; color:var(--ink-soft); padding-block:.32em }
.foot-col a:hover{ color:var(--terra) }
.foot-base{
  border-top:1px solid var(--stone); padding-block:1.4rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  font-size:.83rem; color:#9AA294;
}
.disclaimer{
  font-size:.83rem; color:#9AA294; border:1px dashed var(--stone); border-radius:14px;
  padding:1rem 1.3rem; margin-top:1.4rem; max-width:46ch;
}

/* ---------- Reveal animations ---------- */
html.js .reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d, 0s);
}
html.js .reveal.in{ opacity:1; transform:none }
html.js .reveal-l{ transform:translateX(-30px) translateY(0) }
html.js .reveal-r{ transform:translateX(30px) translateY(0) }
html.js .reveal-l.in, html.js .reveal-r.in{ transform:none }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ padding-top:clamp(140px,16vh,180px); padding-bottom:clamp(36px,5vw,64px) }
.page-hero .lead{ margin-top:1.4rem }

/* ---------- Reduced motion ----------
   Owner's call: gentle decorative loops (helix, chips, marquee) always run.
   We still soften entrance motion to opacity-only fades for reduce-motion visitors. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  html.js .reveal{ transform:none !important; transition:opacity .5s ease }
  .card:hover, .trait:hover, .ring-card:hover, .report-card:hover, .proto-item:hover{ transform:none }
}