:root{--blue:#2b2967;--ink:#2b2f36;--muted:#6b7280;--line:#e3e6ea;--bg:#fff;--soft:#f4f6f9;--accent:#af3db2;--warn:#fff4d6;--warnink:#6b4a00}
*{box-sizing:border-box}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.maint-bar{background:var(--warn);color:var(--warnink);text-align:center;padding:10px 16px;font-size:14px;border-bottom:1px solid #f0d58a}
.maint-bar a{text-decoration:underline;font-weight:600}
header{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:20}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;flex-wrap:wrap}
.top img{height:60px;width:auto;display:block}
.lang{font-size:13px;color:var(--muted)}
nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;flex-wrap:wrap}
nav>ul>li{position:relative}
nav a{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--blue);cursor:pointer;display:inline-block;padding:8px 0}
nav a:hover,nav a.cur{color:var(--accent)}
nav ul ul{display:none;position:absolute;left:0;top:100%;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.1);list-style:none;margin:0;padding:6px 0;min-width:210px}
nav li.open>ul,nav li:hover>ul{display:block}
nav ul ul a{display:block;padding:8px 16px;font-weight:500;letter-spacing:0}
.hero{background:#2d3138;color:#fff;text-align:center;padding:72px 20px}
.hero h1{font-size:34px;margin:0 0 8px;font-weight:600}
.hero p{margin:0 0 24px;font-size:18px;color:#d6d9de}
.hero.blue{background:linear-gradient(135deg,#1b3a66,#3b2a6e)}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;padding:12px 28px;font-size:15px;border-radius:3px;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.cats{display:grid;grid-template-columns:repeat(3,1fr);max-width:1180px;margin:0 auto;padding:36px 20px}
.cats a{text-align:center;font-size:38px;font-weight:300;padding:26px 8px;cursor:pointer;letter-spacing:.02em}
.c1{color:#3a4a5c}.c2{color:#1f6b66}.c3{color:#2b2f36}.c4{color:#8a2f4a}.c5{color:#4d6b3a}
section{padding:40px 0}
h1.pt{font-size:30px;color:var(--blue);margin:36px 0 8px}
h2{font-size:20px;letter-spacing:.08em;color:var(--blue);margin:0 0 14px}
h3{color:var(--blue);margin:0 0 8px}
p{margin:0 0 12px}
.txt p{max-width:860px}
.soft{background:var(--soft)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;cursor:pointer;display:block}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.card img{width:100%;height:auto;display:block;background:#fafafa}
.card div{padding:14px 16px}
.card b{display:block;color:var(--blue);letter-spacing:.04em;font-size:15px;margin-bottom:4px}
.card span{font-size:14px;color:var(--muted)}
.box{background:#fff;border:1px solid var(--line);border-radius:4px;padding:20px}
.stat{text-align:center}
.stat b{display:block;font-size:30px;color:var(--accent)}
.area{border:1px solid var(--line);border-radius:4px;padding:34px 16px;text-align:center;font-weight:600;letter-spacing:.08em;color:var(--blue);cursor:pointer;background:#fff}
.area:hover{box-shadow:0 4px 16px rgba(0,0,0,.1)}
.list{list-style:none;margin:0;padding:0}
.list li{padding:14px 0;border-bottom:1px solid var(--line)}
.list li b{color:var(--blue);display:block}
.list li span{color:var(--muted);font-size:14px}
.ev{display:flex;gap:20px}
.ev time{min-width:170px;color:var(--accent);font-weight:600;font-size:14px}
.dist{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dist .box b{color:var(--blue);display:block;margin-bottom:4px}
.dist .box{font-size:14px}
.dist a{color:var(--accent);text-decoration:underline;word-break:break-all}
.notice{background:var(--warn);color:var(--warnink);border:1px solid #f0d58a;border-radius:4px;padding:14px 18px;margin:16px 0}
.notice a{font-weight:600;text-decoration:underline}
.prog{padding:22px 0;border-bottom:1px solid var(--line)}
footer{border-top:1px solid var(--line);padding:28px 0;font-size:14px;color:var(--muted);margin-top:30px}
footer .row{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;align-items:center}
footer a{color:var(--blue);text-decoration:underline;cursor:pointer}
.overlay{position:fixed;inset:0;background:rgba(15,20,30,.62);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}
.overlay.open{display:flex}
.modal{background:#fff;max-width:540px;width:100%;border-radius:6px;padding:30px 30px 26px;box-shadow:0 20px 60px rgba(0,0,0,.35);position:relative}
.modal h3{margin:0 0 12px;font-size:22px}
.modal .contact{background:var(--soft);border-left:4px solid var(--accent);padding:12px 16px;margin:16px 0;font-size:15px}
.modal .contact a{color:var(--accent);font-weight:600}
.x{position:absolute;right:12px;top:8px;border:0;background:none;font-size:28px;line-height:1;color:var(--muted);cursor:pointer}
.gen{padding-bottom:30px}
.gen h1{font-size:28px;color:var(--blue);margin:8px 0 12px}
.gen h2{font-size:21px;letter-spacing:0;color:var(--blue);margin:22px 0 10px}
.gen h3{font-size:17px}
.gen h4{margin:8px 0}
.gen a{color:var(--accent)}
.gen a[data-notice]{cursor:pointer}
.gen table{border-collapse:collapse;max-width:100%;display:block;overflow-x:auto;margin:12px 0}
.gen td,.gen th{border:1px solid var(--line);padding:6px 10px;vertical-align:top;font-size:14px}
.gen th{background:var(--soft)}
.gen details{border:1px solid var(--line);border-radius:4px;margin:10px 0;padding:0 14px}
.gen summary{cursor:pointer;font-weight:600;color:var(--blue);padding:10px 0}
.gen img{height:auto}
.crumb{font-size:14px;margin:18px 0 0}
.quote{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--accent);color:var(--accent)!important;padding:4px 12px;border-radius:20px;font-size:14px;font-weight:600;text-decoration:none!important;background:#fff}
.quote:hover{background:var(--accent);color:#fff!important}
.quote .env{flex:none}
.quotebar{margin:6px 0 16px}.quotebar span,.muted{color:var(--muted);font-size:14px;margin-left:8px}
.list.cols{columns:3 260px;column-gap:28px}
.list.cols li{break-inside:avoid;padding:7px 0}
.search{width:100%;max-width:520px;padding:10px 14px;border:1px solid var(--line);border-radius:4px;font-size:15px}
html{-webkit-text-size-adjust:100%}
body{overflow-x:hidden;overflow-wrap:break-word}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:4px;width:44px;height:40px;padding:8px;cursor:pointer;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:3px;background:var(--blue);border-radius:2px}
.gen iframe,.gen video{max-width:100%}
.gen pre{overflow-x:auto}
.modal{max-height:90vh;overflow-y:auto}
@media(max-width:720px){
  .maint-bar{font-size:13px;padding:8px 12px;text-align:left}
  .top{padding:8px 0;flex-wrap:nowrap}
  .top img{height:44px}
  .lang{margin-left:auto}
  .burger{display:flex}
  header{position:static}
  nav{display:none;border-top:1px solid var(--line)}
  nav.show{display:block}
  nav>ul{flex-direction:column;gap:0}
  nav>ul>li{border-bottom:1px solid var(--line)}
  nav a{display:block;padding:14px 4px;font-size:15px}
  nav ul ul{position:static;border:0;box-shadow:none;background:var(--soft);padding:0}
  nav li:hover>ul{display:none}
  nav li.open>ul{display:block}
  nav ul ul a{padding:12px 18px}
  .wrap{padding:0 16px}
  .hero{padding:44px 16px}.hero p{font-size:16px}
  .cats{grid-template-columns:repeat(2,1fr);padding:20px 16px}.cats a{font-size:22px;padding:16px 4px}
  section{padding:28px 0}
  h1.pt,.gen h1{font-size:24px}
  .modal{padding:24px 18px 20px}
  .btn{display:block;width:100%;text-align:center}
  .quotebar span{display:block;margin:6px 0 0}
  footer .row{flex-direction:column;align-items:flex-start;gap:10px}
  .list.cols{columns:1}
  .box{padding:16px}
}
@media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}.grid3,.dist{grid-template-columns:1fr 1fr}.cats a{font-size:26px}.hero h1{font-size:26px}.ev{flex-direction:column;gap:2px}}
@media(max-width:520px){.grid,.grid3,.dist{grid-template-columns:1fr}nav>ul{gap:16px}nav ul ul{position:static;box-shadow:none}}

/* contact page + jp/cn pages */
.gradient-background{background:linear-gradient(90deg,#2b2967 0%,#008aad 100%);color:#fff;padding:50px 4% 60px;text-align:center}
.gradient-background h1{font-size:2.2rem;font-weight:700;color:#fff;margin:0 0 20px}
.gradient-background .map{width:60%;max-width:760px;height:auto;margin:10px auto 30px;display:block}
.diagenode-contacts{display:flex;justify-content:center;align-items:flex-start;gap:0;max-width:900px;margin:0 auto}
.diagenode-contacts>div{flex:1;padding:10px 40px;line-height:1.7;font-size:1.1rem}
.diagenode-contacts .col-usa{border-right:1px solid rgba(255,255,255,.7)}
.diagenode-contacts p{margin:0}
.diagenode-contacts .t{font-weight:700;font-size:1.2em;margin:0 0 6px}
.diagenode-contacts a{color:#af3db2;text-decoration:none;font-weight:600}
.btn-distributor{display:inline-block;background:#af3db2;color:#fff;padding:15px 25px;font-size:1.05rem;text-decoration:none;margin-top:36px}
.btn-distributor:hover{filter:brightness(1.12)}
.contact-note{max-width:900px;margin:34px auto 0;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.5);border-radius:4px;padding:14px 18px;font-size:.98rem}
.contact-note a{color:#fff;font-weight:700;text-decoration:underline}
@media(max-width:720px){
  .gradient-background{padding:36px 16px 44px}
  .gradient-background h1{font-size:1.8rem}
  .gradient-background .map{width:100%}
  .diagenode-contacts{flex-direction:column;align-items:stretch}
  .diagenode-contacts>div{padding:14px 0}
  .diagenode-contacts .col-usa{border-right:0;border-bottom:1px solid rgba(255,255,255,.7);padding-bottom:22px;margin-bottom:8px}
  .btn-distributor{display:block}
}


/* foundation-like grid for imported pages */
.gen .row{display:flex;flex-wrap:wrap;margin:0 -8px;width:calc(100% + 16px)}
.gen .row .row{width:auto}
.gen .columns,.gen .column{padding:0 8px;flex:1 1 0;min-width:0}
.gen .text-center{text-align:center}.gen .text-right{text-align:right}.gen .text-left{text-align:left}
.gen .label{display:inline-block;background:var(--soft);border:1px solid var(--line);border-radius:3px;padding:1px 8px;font-size:12px;margin:2px 0}
.gen .label.success{background:#e8f4ea;border-color:#bfe0c4;color:#25623a}
.gen .centered{text-align:center}
@media(max-width:720px){.gen .row{flex-direction:column}.gen .columns,.gen .column{flex:none;width:100%}}


/* home banner + buttons (as on the original site) */
.banner{display:block;cursor:pointer}
.banner-bg{background:#0b1f5a url("https://web.archive.org/web/20260608203733im_/https://diagenode.com/img/banners/b-home-cfRNA-seq.png") no-repeat center/cover;height:350px}
.banner-content{display:flex;align-items:center;height:100%;padding:0 3% 0 42%}
.textbanner{margin:0;width:70%;color:#fff;font-size:1.5vw;line-height:1.5}
.newbadge{display:inline-block;background:#317793;color:#fff;font-size:.55em;padding:3px 8px;margin-bottom:6px}
.bannerbtn{display:inline-block;margin-top:10px;background:#af3db2;color:#fff;padding:10px 12px;font-size:.7em}.homebtns{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 10px;max-width:1000px;margin:34px auto;padding:0 20px;justify-items:center}
.homebtns a{display:block}.homebtns img{max-width:100%;height:auto;display:block}
@media(max-width:1208px){
  .banner-bg{background-image:url("https://web.archive.org/web/20260608203733im_/https://www.diagenode.com/img/banners/b-home-cfRNA-seq_mobile.png");height:auto;min-height:220px}
  .banner-content{background:rgba(0,0,0,.5);padding:28px 8%;justify-content:center;min-height:220px}
  .textbanner{text-align:center;width:90%;font-size:clamp(16px,3.2vw,26px)}
}@media(max-width:560px){.homebtns{grid-template-columns:repeat(2,1fr)}}
@media(min-width:721px){.gen .small-1{flex:none;width:8.3333%}}
@media(min-width:721px){.gen .small-2{flex:none;width:16.6667%}}
@media(min-width:721px){.gen .small-3{flex:none;width:25%}}
@media(min-width:721px){.gen .small-4{flex:none;width:33.3333%}}
@media(min-width:721px){.gen .small-5{flex:none;width:41.6667%}}
@media(min-width:721px){.gen .small-6{flex:none;width:50%}}
@media(min-width:721px){.gen .small-7{flex:none;width:58.3333%}}
@media(min-width:721px){.gen .small-8{flex:none;width:66.6667%}}
@media(min-width:721px){.gen .small-9{flex:none;width:75%}}
@media(min-width:721px){.gen .small-10{flex:none;width:83.3333%}}
@media(min-width:721px){.gen .small-11{flex:none;width:91.6667%}}
@media(min-width:721px){.gen .small-12{flex:none;width:100%}}
@media(min-width:721px){.gen .medium-1{flex:none;width:8.3333%}}
@media(min-width:721px){.gen .medium-2{flex:none;width:16.6667%}}
@media(min-width:721px){.gen .medium-3{flex:none;width:25%}}
@media(min-width:721px){.gen .medium-4{flex:none;width:33.3333%}}
@media(min-width:721px){.gen .medium-5{flex:none;width:41.6667%}}
@media(min-width:721px){.gen .medium-6{flex:none;width:50%}}
@media(min-width:721px){.gen .medium-7{flex:none;width:58.3333%}}
@media(min-width:721px){.gen .medium-8{flex:none;width:66.6667%}}
@media(min-width:721px){.gen .medium-9{flex:none;width:75%}}
@media(min-width:721px){.gen .medium-10{flex:none;width:83.3333%}}
@media(min-width:721px){.gen .medium-11{flex:none;width:91.6667%}}
@media(min-width:721px){.gen .medium-12{flex:none;width:100%}}
@media(min-width:721px){.gen .large-1{flex:none;width:8.3333%}}
@media(min-width:721px){.gen .large-2{flex:none;width:16.6667%}}
@media(min-width:721px){.gen .large-3{flex:none;width:25%}}
@media(min-width:721px){.gen .large-4{flex:none;width:33.3333%}}
@media(min-width:721px){.gen .large-5{flex:none;width:41.6667%}}
@media(min-width:721px){.gen .large-6{flex:none;width:50%}}
@media(min-width:721px){.gen .large-7{flex:none;width:58.3333%}}
@media(min-width:721px){.gen .large-8{flex:none;width:66.6667%}}
@media(min-width:721px){.gen .large-9{flex:none;width:75%}}
@media(min-width:721px){.gen .large-10{flex:none;width:83.3333%}}
@media(min-width:721px){.gen .large-11{flex:none;width:91.6667%}}
@media(min-width:721px){.gen .large-12{flex:none;width:100%}}