:root{
  --navy:#001E4C;
  --navy-soft:#123159;
  --teal:#026573;
  --teal-bright:#0FA3B4;
  --grey:#5A6469;
  --paper:#F5F6F3;
  --paper-dim:#E9ECE7;
  --ink:#031B33;
  --ink-soft:#4B5A63;
  --line: rgba(3,27,51,0.13);
  --line-strong: rgba(3,27,51,0.26);
  --serif:'Fraunces', serif;
  --sans:'IBM Plex Sans', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
ul{list-style:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap, .wrap-narrow{padding:0 20px;} }

.eyebrow{font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--teal); display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--teal); display:inline-block;}
.eyebrow.on-dark{color:#8FD6DD;}
.eyebrow.on-dark::before{background:#8FD6DD;}

h1,h2,h3{font-family:var(--serif); font-weight:600; letter-spacing:-0.01em; color:var(--navy); overflow-wrap:break-word; word-break:break-word; hyphens:auto;}
p{color:var(--ink-soft);}
.lede{font-family:var(--sans); color:var(--ink-soft); font-size:17px; line-height:1.7; max-width:60ch;}

a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- NAV ---------- */
header{position:sticky; top:0; z-index:60; background:rgba(245,246,243,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:78px; gap:20px;}
.brand{display:flex; align-items:center; gap:10px;}

@media (max-width:400px){
  nav.wrap{gap:8px;}
  nav.wrap > div:last-child{gap:6px !important;}
  .brand span{display:none;}
  .lang-current{padding:8px 8px;}
  .nav-cta{padding:8px 10px; font-size:10.5px;}
  .menu-toggle{padding:8px 10px; font-size:10px;}
}
.brand img{height:34px; width:auto;}
.brand span{font-family:var(--mono); font-weight:500; font-size:15px; letter-spacing:.05em; color:var(--navy);}
.navlinks{display:flex; gap:24px; font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;}
.navlinks a{position:relative; padding-bottom:4px; color:var(--ink-soft); white-space:nowrap;}
.navlinks a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--teal); transition:width .25s ease;}
.navlinks a:hover::after, .navlinks a.active::after{width:100%;}
.navlinks a.active{color:var(--navy);}
.nav-cta{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.07em; border:1px solid var(--navy); padding:11px 16px; border-radius:2px; transition:background .2s ease, color .2s ease; white-space:nowrap; display:inline-flex; align-items:center;}
.nav-cta:hover{background:var(--navy); color:var(--paper);}

.lang-switch{position:relative;}
.lang-current{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; border:1px solid var(--line-strong); background:none; color:var(--navy); padding:10px 12px; border-radius:2px; cursor:pointer; display:inline-flex; align-items:center; gap:5px;}
.lang-current:hover{border-color:var(--navy);}
.lang-current span{font-size:9px; color:var(--grey);}
.lang-menu{display:none; flex-direction:column; position:absolute; top:calc(100% + 6px); right:0; background:#fff; border:1px solid var(--line-strong); border-radius:3px; min-width:64px; box-shadow:0 8px 24px rgba(3,27,51,0.12); z-index:80; overflow:hidden;}
.lang-menu a{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding:10px 14px; text-align:left;}
.lang-menu a:hover{background:var(--paper-dim); color:var(--navy);}
.lang-switch:hover .lang-menu, .lang-switch:focus-within .lang-menu{display:flex;}
.menu-toggle{display:none;}
@media (max-width:1220px){
  .navlinks{display:none;}
  .menu-toggle{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; border:1px solid var(--line-strong); padding:11px 14px; border-radius:2px; background:none; color:var(--navy); cursor:pointer;}
  .menu-toggle:hover{border-color:var(--navy);}
}

/* breadcrumbs */
.breadcrumbs{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--grey); display:flex; gap:8px; flex-wrap:wrap; padding:22px 0 0;}
.breadcrumbs a{color:var(--ink-soft);}
.breadcrumbs a:hover{color:var(--teal);}

.btn{font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; padding:14px 22px; border-radius:2px; display:inline-flex; align-items:center; gap:10px; transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; cursor:pointer; border:none;}
.btn-primary{background:var(--teal); color:#fff; border:1px solid var(--teal);}
.btn-primary:hover{background:var(--navy); border-color:var(--navy); transform:translateY(-1px);}
.btn-ghost{border:1px solid rgba(255,255,255,0.55); color:#fff; background:none;}
.btn-ghost:hover{border-color:#fff; transform:translateY(-1px);}
.btn-ghost-dark{border:1px solid var(--line-strong); color:var(--navy); background:none;}
.btn-ghost-dark:hover{border-color:var(--navy); transform:translateY(-1px);}

.fade-in{opacity:0; transform:translateY(10px); animation:fadeUp .8s ease forwards;}
@keyframes fadeUp{ to{opacity:1; transform:translateY(0);} }
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

section{padding:100px 0;}
@media (max-width:640px){ section{padding:64px 0;} }
.section-head{max-width:680px; margin-bottom:50px;}
.section-head h2{font-size:clamp(28px,4vw,40px); margin-top:14px;}
.section-tight{padding-top:0;}

/* ---------- PAGE HERO (inner pages) ---------- */
.page-hero{position:relative; padding:56px 0 76px; overflow:hidden;}
.page-hero.on-navy{background:var(--navy); color:#fff;}
.page-hero.on-navy h1{color:#fff;}
.page-hero.on-navy .lede{color:#C7D2D5;}
.page-hero h1{font-size:clamp(36px,5.5vw,56px); margin-top:14px; line-height:1.04;}
.page-hero .lede{margin-top:20px; font-size:18px;}
.page-hero-photo{position:relative; min-height:56vh; display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
}
.page-hero-photo .overlay{position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,17,41,0.92) 0%, rgba(0,20,46,0.5) 50%, rgba(0,20,46,0.15) 100%);}
.page-hero-photo .wrap{position:relative; z-index:2; padding-bottom:56px;}
.page-hero-photo h1{color:#fff;}
.page-hero-photo .lede{color:#D7DEE0;}

.tag{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; border:1px solid rgba(255,255,255,0.35); color:#E5EAEA; padding:6px 10px; border-radius:20px;}
.tag-light{border-color:var(--line-strong); color:var(--ink-soft);}
.hero-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:28px;}

/* ---------- SPLIT / GRID LAYOUTS ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
@media (max-width:900px){ .split{grid-template-columns:1fr; gap:36px;} }
.split-rev{direction:rtl;} .split-rev > *{direction:ltr;}
.split img{border-radius:6px; width:100%; height:420px; object-fit:cover;}
.split > *{min-width:0;}
.chip-list{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.chip{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; background:var(--paper-dim); border:1px solid var(--line); padding:8px 12px; border-radius:3px; color:var(--navy);}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.grid-2 > *{min-width:0;}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr; gap:32px;} }
.grid-2-wide{display:grid; grid-template-columns:1fr 1.3fr; gap:56px; align-items:flex-start;}
.grid-2-wide > *{min-width:0;}
@media (max-width:900px){ .grid-2-wide{grid-template-columns:1fr; gap:32px;} }

.card-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:860px){ .card-grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .card-grid-3{grid-template-columns:1fr;} }

/* ---------- DIAGRAM / DARK BAND ---------- */
.dark-band{background:var(--navy); color:#fff;}
.dark-band h2{color:#fff;}
.dark-band p.lede{color:#B9C6CA;}
.diagram-card{background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:6px; padding:30px 22px 22px;}
.diagram-card .cap{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#8FD6DD; margin-bottom:16px; display:block;}
.diagram-labels{display:flex; justify-content:space-between; margin-top:14px; font-family:var(--mono); font-size:10.5px; color:#AEBBBF;}
.diagram-labels div{width:33%; text-align:center; padding:0 4px;}
.diagram-labels b{display:block; color:#fff; font-size:12px; margin-bottom:2px;}
.draw-path{stroke-dasharray:900; stroke-dashoffset:900; animation:draw 2.1s ease forwards;}
@keyframes draw{ to{stroke-dashoffset:0;} }

/* ---------- PLATFORM PILLARS ---------- */
.platform{background:var(--paper-dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);}
.pillar{background:var(--paper-dim); padding:34px 26px; min-height:260px; display:flex; flex-direction:column; justify-content:space-between; transition:background .25s ease;}
.pillar:hover{background:var(--paper);}
.pillar .num{font-family:var(--mono); color:var(--teal); font-size:13px;}
.pillar h3{font-size:19px; margin-top:18px; font-weight:600;}
.pillar p{font-size:13.5px; margin-top:10px; line-height:1.6;}
@media (max-width:940px){ .pillars{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .pillars{grid-template-columns:1fr;} }

/* ---------- CARD GRIDS (tissue / apps) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:940px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .card-grid{grid-template-columns:1fr;} }
.info-card{border:1px solid var(--line); border-radius:5px; padding:26px 22px; background:#fff; transition:border-color .2s ease, transform .2s ease;}
.info-card:hover{border-color:var(--teal); transform:translateY(-3px);}
.info-card svg{width:28px; height:28px; margin-bottom:16px;}
.info-card h4{font-size:15.5px; font-weight:600; font-family:var(--sans); color:var(--navy);}
.info-card .use{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--teal); margin-top:6px; display:block;}
.info-card p{font-size:13px; margin-top:10px; line-height:1.55;}

/* ---------- QC / DATA VIZ ---------- */
.qc-card{background:var(--paper-dim); border:1px solid var(--line); border-radius:6px; padding:26px 22px;}
.qc-card .cap{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--teal); margin-bottom:6px; display:block;}
.rin-badge{display:inline-flex; align-items:center; gap:8px; background:var(--navy); color:#fff; font-family:var(--mono); font-size:12px; padding:6px 12px; border-radius:20px; margin-top:14px;}
.rin-badge .dot{width:7px; height:7px; border-radius:50%; background:#4BD3B0;}
.metric-list{margin-top:26px; border-top:1px solid var(--line);}
.metric{display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); font-size:13.5px;}
.metric span:first-child{color:var(--ink-soft);}
.metric span:last-child{font-family:var(--mono); color:var(--navy); text-align:right;}

/* ---------- SPEC TABLE (product page) ---------- */
.spec-table{width:100%; border-collapse:collapse; margin-top:8px;}
.spec-table th{text-align:left; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--grey); padding:12px 14px; border-bottom:1px solid var(--line-strong);}
.spec-table td{padding:14px 14px; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink);}
.spec-table tr td:first-child{color:var(--ink-soft); width:34%;}
.spec-table tbody tr:hover{background:var(--paper-dim);}

/* ---------- PRODUCT CALLOUT ---------- */
.product{background:linear-gradient(120deg, var(--teal), #045C68); color:#fff;}
.product-inner{display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap;}
.product h2{color:#fff; max-width:18ch;}
.product .eyebrow{color:#CFF2F2;}
.product .eyebrow::before{background:#CFF2F2;}
.product p.lede{color:#DFF4F3; max-width:46ch;}
.stock-badge{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; background:rgba(255,255,255,0.14); padding:8px 14px; border-radius:20px; margin-top:18px;}
.stock-badge .dot{width:8px; height:8px; border-radius:50%; background:#4BD3B0; animation:pulse 1.8s infinite;}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* ---------- PROCESS / TIMELINE ---------- */
.process-list{border-top:1px solid var(--line);}
.process-row{display:grid; grid-template-columns:70px 240px 1fr; gap:24px; align-items:start; padding:24px 0; border-bottom:1px solid var(--line);}
.process-row .num{font-family:var(--mono); color:var(--teal); font-size:14px; padding-top:2px;}
.process-row h4{font-family:var(--serif); font-weight:600; font-size:18px; color:var(--navy);}
.process-row p{font-size:14px; max-width:56ch;}
@media (max-width:760px){
  .process-row{grid-template-columns:36px 1fr; row-gap:6px;}
  .process-row h4{grid-column:2;} .process-row p{grid-column:2;}
}

/* ---------- TIMELINE (société) ---------- */
.timeline{border-left:1px solid var(--line-strong); margin-left:6px; padding-left:34px;}
.timeline-item{position:relative; padding-bottom:38px;}
.timeline-item::before{content:""; position:absolute; left:-40px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--teal); border:3px solid var(--paper);}
.timeline-item .date{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--teal);}
.timeline-item h4{margin-top:6px; font-size:18px; color:var(--navy);}
.timeline-item p{margin-top:6px; font-size:14px; max-width:56ch;}

/* ---------- FAQ (details/summary, no JS, good for SEO/AI) ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line); padding:20px 0;}
.faq summary{font-family:var(--serif); font-weight:600; font-size:17px; color:var(--navy); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-family:var(--mono); font-size:20px; color:var(--teal); flex:none;}
.faq details[open] summary::after{content:"–";}
.faq .faq-a{margin-top:14px; font-size:14.5px; max-width:70ch; line-height:1.7;}

/* ---------- QUOTE / CALLOUT BOX ---------- */
.callout{border-left:3px solid var(--teal); background:var(--paper-dim); padding:22px 26px; border-radius:0 4px 4px 0; font-size:14.5px; color:var(--ink-soft); margin:28px 0;}
.callout b{color:var(--navy);}

/* ---------- GALLERY ---------- */
.gallery{background:var(--paper-dim); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.gallery-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:220px 220px; gap:12px;}
.gallery-grid img{width:100%; height:100%; object-fit:cover; border-radius:5px; background:var(--line); min-width:0;}
.gallery-grid .big{grid-row:1 / 3; grid-column:1;}
@media (max-width:760px){
  .gallery-grid{grid-template-columns:1fr 1fr; grid-template-rows:200px 160px 160px;}
  .gallery-grid .big{grid-row:1; grid-column:1 / 3; height:200px;}
}

/* ---------- PRODUCT CARDS (grid of species) ---------- */
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media (max-width:940px){ .product-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .product-grid{grid-template-columns:1fr;} }
.product-card{border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; transition:border-color .2s ease, transform .2s ease; display:flex; flex-direction:column;}
.product-card:hover{border-color:var(--teal); transform:translateY(-3px);}
.product-card .photo{height:170px; overflow:hidden; background:var(--paper-dim);}
.product-card .photo img{width:100%; height:100%; object-fit:cover; display:block;}
.product-card .body{padding:20px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1;}
.product-card .latin{font-family:var(--serif); font-style:italic; color:var(--grey); font-size:12.5px;}
.product-card h4{font-size:17px; color:var(--navy);}
.product-card .use{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--teal);}
.product-card p{font-size:13px; line-height:1.55; margin-top:2px;}
.product-card .stock{margin-top:auto; padding-top:10px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); display:flex; align-items:center; gap:6px;}
.product-card .stock .dot{width:6px; height:6px; border-radius:50%; background:#1E9E76; display:inline-block;}

/* ---------- ABOUT FACTS ---------- */
.about-facts{border-top:1px solid rgba(255,255,255,0.18);}
.fact{display:flex; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.18); font-family:var(--mono); font-size:13px;}
.fact span:first-child{color:#8FA0A6; text-transform:uppercase; letter-spacing:.06em;}
.fact span:last-child{color:#fff; text-align:right;}
.fact.light{border-bottom-color:var(--line);}
.fact.light span:first-child{color:var(--grey);}
.fact.light span:last-child{color:var(--navy);}

/* ---------- CONTACT ---------- */
.contact-card{border:1px solid var(--line-strong); border-radius:6px; padding:54px 44px; display:flex; justify-content:space-between; align-items:center; gap:30px; background:linear-gradient(135deg, var(--paper-dim), var(--paper));}
@media (max-width:760px){ .contact-card{flex-direction:column; align-items:flex-start;} }
.contact-card h3{font-size:27px; max-width:22ch;}
.contact-email{font-family:var(--mono); font-size:15px; color:var(--teal); margin-top:10px; display:inline-block; border-bottom:1px solid var(--teal);}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px;}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }
.field{display:flex; flex-direction:column; gap:8px;}
.field.full{grid-column:1/-1;}
.field label{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft);}
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:14.5px; padding:12px 14px; border:1px solid var(--line-strong); border-radius:3px; background:#fff; color:var(--ink);
}
.field textarea{resize:vertical; min-height:120px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--teal); outline-offset:1px; border-color:var(--teal);}

/* ---------- CROSS-LINK CARDS (related pages) ---------- */
.related{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
@media (max-width:860px){ .related{grid-template-columns:1fr;} }
.related-card{border:1px solid var(--line); border-radius:5px; padding:24px 22px; background:#fff; transition:border-color .2s ease, transform .2s ease;}
.related-card:hover{border-color:var(--teal); transform:translateY(-3px);}
.related-card .eyebrow{font-size:10.5px;}
.related-card h4{margin-top:10px; font-size:16px; color:var(--navy);}
.related-card p{font-size:13px; margin-top:8px;}
.related-card .go{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--teal); margin-top:14px; display:inline-block;}

footer{border-top:1px solid var(--line); padding:48px 0 34px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:32px;}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr;} }
.foot-brand{display:flex; align-items:center; gap:8px;}
.foot-brand img{height:24px;}
.foot-col h5{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--grey); margin-bottom:14px;}
.foot-col a{display:block; font-size:13.5px; color:var(--ink-soft); padding:5px 0;}
.foot-col a:hover{color:var(--teal);}
.foot-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center; font-family:var(--mono); font-size:11px; color:var(--grey); text-transform:uppercase; letter-spacing:.04em; border-top:1px solid var(--line); padding-top:24px;}

.skip-link{position:absolute; left:-999px; top:auto; background:var(--navy); color:#fff; padding:10px 16px; z-index:100; font-family:var(--mono); font-size:12px;}
.skip-link:focus{left:16px; top:16px;}