/* =========================================================================
   reThink64 BioNetworks — shared stylesheet
   Brand tokens in :root. Navy + orange only (mixed investor/partner site).
   Self-hosted Montserrat (headlines) + Inter (body). No em dashes in copy.
   ========================================================================= */

/* ---- Self-hosted fonts (Latin subset, variable weight axis) ------------- */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:600 800;
  font-display:swap;
  src:url(../fonts/montserrat.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(../fonts/inter.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- Brand tokens ------------------------------------------------------- */
:root{
  --navy:#223F57; --navy-2:#1a3244; --orange:#E7742C; --orange-d:#cf6420;
  --slate:#708090; --gray:#E0E0E0; --ink:#223F57; --bg:#ffffff; --bg-soft:#f6f8fa;
  --line:#e6ebf0; --radius:14px; --maxw:1160px;
  --shadow:0 1px 3px rgba(34,63,87,.06),0 8px 30px rgba(34,63,87,.06);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Montserrat,system-ui,sans-serif;color:var(--navy);line-height:1.12;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:Montserrat;font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:14px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:Montserrat;font-weight:700;font-size:15px;padding:13px 24px;border-radius:999px;transition:.16s;cursor:pointer;border:2px solid transparent}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-d)}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-navy{border-color:var(--navy);color:var(--navy)}
.btn-navy:hover{background:var(--navy);color:#fff}

/* ---- Brand logo (CSS mask so pages don't carry inline SVG) --------------
   Recolors via currentColor: navy in the header, white in the footer.
   Source mark: assets/reThink64_lockup.svg (viewBox 700x128, ratio ~5.47). */
.brand{display:inline-block;color:var(--navy);width:190px}
.brand-mark{
  display:block;height:26px;width:148px;
  background-color:currentColor;
  -webkit-mask:url(../reThink64_lockup.svg) left center/contain no-repeat;
  mask:url(../reThink64_lockup.svg) left center/contain no-repeat;
}

/* ---- Header ------------------------------------------------------------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:30px;height:70px}
.navlinks{display:flex;align-items:center;gap:30px;margin-left:auto}
.navlinks a{font-family:Montserrat;font-weight:600;font-size:14.5px;color:var(--navy);white-space:nowrap}
.navlinks a:hover{color:var(--orange)}
.navlinks a.active{color:var(--orange)}
.nav-actions{display:flex;align-items:center;gap:12px;flex:none}
.nav-actions .btn{font-size:14px;padding:9px 18px;white-space:nowrap}
.nav-actions .btn-primary:hover{color:#fff}
.menu-btn{display:none}

/* ---- Hero --------------------------------------------------------------- */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:0}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-top:78px;padding-bottom:78px}
.hero h1{color:#fff;font-size:54px;font-weight:800;letter-spacing:-.02em}
.hero .lead{font-size:19px;color:#cdd8e2;margin:22px 0 30px;max-width:33em}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{position:relative}
.hero-art img{border-radius:var(--radius);width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.hero-tag{position:absolute;left:14px;bottom:14px;background:rgba(26,50,68,.86);border:1px solid rgba(255,255,255,.14);color:#dfe8f0;font-size:12.5px;padding:7px 12px;border-radius:8px}
.kpis{border-top:1px solid rgba(255,255,255,.12);background:var(--navy-2)}
.kpis .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;padding:38px 28px 0;align-items:start}
.kpi .n{font-family:Montserrat;font-weight:800;font-size:clamp(24px,2.5vw,32px);line-height:1.15;letter-spacing:-.01em;color:#fff;overflow-wrap:anywhere}
.kpi .n span{color:var(--orange)}
/* 24ch measure keeps the five labels breaking at similar points, so the band's height
   is not set by one long column. If a label needs a third line, shorten the label. */
.kpi .l{font-size:13.5px;line-height:1.5;color:#b7c8d6;margin-top:8px;max-width:24ch}
/* Sixth claim, which has no number of its own. Carries the bottom padding of the band. */
.kpi-note{grid-column:1/-1;padding:18px 0 32px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;line-height:1.6;color:#b7c8d6}
.kpi-note b{color:#fff;font-weight:600}

/* ---- Interior page hero (no art column) --------------------------------- */
.page-hero{background:var(--navy);color:#fff;padding:74px 0 64px}
.page-hero .eyebrow{color:var(--orange)}
.page-hero h1{color:#fff;font-size:44px;font-weight:800;letter-spacing:-.02em;max-width:15em}
.page-hero .lead{font-size:19px;color:#cdd8e2;margin:20px 0 28px;max-width:42em}
.page-hero .cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---- Callout (accented statement block) --------------------------------- */
.callout{background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--radius);padding:28px 32px}
.callout h3{font-size:22px;margin-bottom:10px}
.callout p{color:var(--slate);font-size:16px}
.callout p+p{margin-top:12px}

/* ---- Prose helpers ------------------------------------------------------ */
.lede{font-size:19px;color:var(--slate);max-width:46em}
.note{color:var(--slate);font-size:13px;margin-top:18px}

/* ---- Sections ----------------------------------------------------------- */
section{padding:82px 0}
.section-head{max-width:760px;margin-bottom:44px}
.section-head h1,.section-head h2{font-size:36px;font-weight:800}
.section-head p{font-size:18px;color:var(--slate);margin-top:14px}
.soft{background:var(--bg-soft)}

/* ---- Cards -------------------------------------------------------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.card h3{font-size:19px;margin-bottom:8px}
.card p{color:var(--slate);font-size:15px}
.card .tag{font-family:Montserrat;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:12px}

/* ---- Insights: post cards + article ------------------------------------- */
.post-card .cat{font-family:Montserrat;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);display:block;margin-bottom:12px}
.post-card h3{font-size:19px;margin-bottom:8px}
.post-card .excerpt{color:var(--slate);font-size:15px}
.post-card .more{display:inline-block;margin-top:16px;font-family:Montserrat;font-weight:700;font-size:14px;color:var(--orange)}
.post-card:hover .more{text-decoration:underline}

.article{max-width:740px;margin:0 auto;padding:64px 28px 8px}
.article .eyebrow{margin-bottom:14px}
.article h1{font-size:clamp(30px,4vw,44px);letter-spacing:-.02em;margin-bottom:14px}
.article .byline{font-family:Montserrat;font-weight:600;font-size:13px;letter-spacing:.03em;color:var(--slate);margin-bottom:34px}
.article .lede{font-size:20px;line-height:1.6;color:var(--slate);margin-bottom:28px}
.article h2{font-size:23px;margin:36px 0 12px}
.article p{font-size:17px;line-height:1.75;color:#2f4456;margin-bottom:18px}
.article ul{margin:0 0 20px 22px}
.article li{font-size:17px;line-height:1.7;color:#2f4456;margin-bottom:8px}
.article .article-foot{margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.back-link{font-family:Montserrat;font-weight:700;font-size:14px;color:var(--orange)}
.back-link:hover{text-decoration:underline}

/* ---- Platform ----------------------------------------------------------- */
.platform .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.platform-art{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.claim{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.claim:last-child{border-bottom:0}
.claim .ck{flex:none;width:30px;height:30px;border-radius:8px;background:rgba(231,116,44,.12);color:var(--orange);display:grid;place-items:center;font-weight:800;font-family:Montserrat}
.claim h3{font-size:18px;margin-bottom:3px}
.claim p{color:var(--slate);font-size:15px}

/* ---- Markets ------------------------------------------------------------ */
.markets .grid-3{gap:22px}
.mkt{border-radius:var(--radius);padding:30px;color:#fff;position:relative;overflow:hidden}
.mkt:nth-child(1){background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:var(--shadow)}
.mkt:nth-child(2){background:var(--orange)}
.mkt:nth-child(3){background:var(--navy)}
.mkt .num{font-family:Montserrat;font-weight:700;font-size:13px;opacity:.7;letter-spacing:.1em}
.mkt .size{font-family:Montserrat;font-weight:800;font-size:clamp(36px,9vw,44px);line-height:1;margin:14px 0 4px}
.mkt h3{font-size:19px;color:inherit;margin-bottom:10px}
.mkt p{font-size:14.5px;opacity:.92}
.mkt .use{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.25);font-weight:600;font-size:14.5px}
.mkt:nth-child(1) .use{border-top-color:var(--line)}
.mkt-note{color:var(--slate);font-size:13px;margin-top:18px}

/* ---- Approach / dark band ----------------------------------------------- */
.band{background:var(--navy);color:#fff}
.band h2{color:#fff}
.band .section-head p{color:#c3d0db}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step{padding:26px 22px;border-left:1px solid var(--line)}
.step:first-child{border-left:0;padding-left:0}
.step .s{font-family:Montserrat;font-weight:800;color:var(--orange);font-size:14px;letter-spacing:.08em}
.step h3{color:var(--navy);font-size:17px;margin:10px 0 6px}
.step p{color:var(--slate);font-size:14px}
/* the steps component also runs on the dark bands, where it inverts */
.band .step,.cta-band .step{border-left-color:rgba(255,255,255,.14)}
.band .step h3,.cta-band .step h3{color:#fff}
.band .step p,.cta-band .step p{color:#b9c7d3}
/* Dark variant of the two-column technology section. The home page opens on it, so it uses the
   same .band treatment as every other dark section rather than a one-off background. Every piece
   of text in it has to be re-colored: without these the h1 and the three claim headings inherit
   navy and go invisible on navy. */
.band h1{color:#fff}
.band .claim{border-bottom-color:rgba(255,255,255,.14)}
.band .claim h3{color:#fff}
.band .claim p{color:#b9c7d3}
.band .claim .ck{background:rgba(231,116,44,.20)}
.band .mech-cap{color:#a9bccb}
/* On navy the figure card is a glass panel, not a white slab. The SVG's own background
   plates carry fill-opacity, so the navy reads through the diagram itself too. */
.band .nexus-figure{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);box-shadow:none}
/* Section lead paragraph, previously an inline style. Needs a class so the dark variant can
   override its color; an inline color would win over any stylesheet rule. */
.tech-lead{margin-top:14px;color:var(--slate);font-size:17px;max-width:34em}
.band .tech-lead{color:#cdd8e2}

/* ---- Logo bars ---------------------------------------------------------- */
.logobar{padding:42px 0}
.logobar p{text-align:center;font-family:Montserrat;font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:26px}
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:38px 52px}
.logos img{height:38px;width:auto;opacity:.72;filter:grayscale(1);transition:.2s}
.logos img:hover{opacity:1;filter:none}
.logos.tall img{height:46px}

/* ---- Team --------------------------------------------------------------- */
.team-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.person{text-align:left}
.person .ph{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:var(--gray);margin-bottom:14px;filter:grayscale(.15)}
.person h4{font-size:17px}
.person .role{color:var(--orange);font-family:Montserrat;font-weight:600;font-size:13px;line-height:1.6;margin:2px 0 6px}
/* Reserve two title lines so bios start level across a row, even when one title wraps */
.team-grid .person .role,.adv-grid .person .role{min-height:3.2em}
.person p{color:var(--slate);font-size:13.5px}
.subhead{font-family:Montserrat;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin:52px 0 24px}
.adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

/* ---- CTA band ----------------------------------------------------------- */
.cta-band{background:linear-gradient(180deg,var(--navy),var(--navy-2));color:#fff;text-align:center}
.cta-band h2{color:#fff;font-size:38px}
.cta-band p{color:#c3d0db;font-size:18px;margin:16px auto 30px;max-width:34em}
.cta-band .cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.page-hero .lead a{text-decoration:underline;text-underline-offset:3px}
.page-hero .lead a:hover{color:#fff}

/* ---- Contact form ------------------------------------------------------- */
.contact-form{max-width:640px}
.contact-form .field{margin-bottom:22px}
.contact-form label{display:block;font-family:Montserrat;font-weight:600;font-size:14.5px;color:var(--navy);margin-bottom:8px}
.contact-form .req{color:var(--orange)}
.contact-form .hint{font-size:13px;color:var(--slate);margin-top:6px}
.contact-form input:not([type=checkbox]),.contact-form select,.contact-form textarea{
  display:block;width:100%;font:inherit;font-size:16px;line-height:1.4;color:var(--ink);
  background:#fff;border:1.5px solid #c9d3dc;border-radius:10px;padding:12px 14px;
  transition:border-color .16s,box-shadow .16s}
.contact-form textarea{resize:vertical;min-height:150px}
.contact-form select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23223F57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.contact-form select:invalid{color:var(--slate)}
.contact-form ::placeholder{color:#8a9aa8;opacity:1}
.contact-form input:hover,.contact-form select:hover,.contact-form textarea:hover{border-color:#a9b8c5}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(231,116,44,.28)}
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible,
.contact-form .btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.contact-form .captcha-slot:not(:empty){margin-bottom:18px}
.contact-form .form-actions{margin-top:6px}
.contact-form .btn{border:2px solid transparent}
.contact-form .btn:disabled{opacity:.7;cursor:progress}
.contact-form .privacy{font-size:13px;color:var(--slate);margin-top:14px;max-width:34em}
.form-status{font-size:14.5px;line-height:1.5;margin-bottom:18px}
.form-status:empty{display:none}
.form-status.is-error{color:#b3541b;background:rgba(231,116,44,.08);border:1px solid rgba(231,116,44,.35);border-radius:10px;padding:12px 14px}
.form-done{font-family:Montserrat;font-weight:600;font-size:19px;color:var(--navy);line-height:1.4;max-width:26em;outline:none}
.form-done::before{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--orange);margin-bottom:18px}

/* ---- Footer ------------------------------------------------------------- */
footer{background:var(--navy-2);color:#9fb2c1;padding:52px 0 34px;font-size:14px}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.foot .brand{color:#fff;width:170px;margin-bottom:14px}
.foot a{color:#c3d0db}
.foot a:hover{color:#fff}
.foot-links{display:flex;gap:40px;flex-wrap:wrap}
.foot-col h5{color:#fff;font-family:Montserrat;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.foot-col a{display:block;margin-bottom:8px}
.foot-legal{border-top:1px solid rgba(255,255,255,.1);margin-top:38px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#7f95a6;font-size:13px}
.foot-blurb{max-width:24em;color:#8ea3b4}

/* ---- Responsive --------------------------------------------------------- */
@media(max-width:900px){
  .hero .wrap,.platform .wrap{grid-template-columns:1fr;gap:34px}
  .hero-art{order:-1}
  .grid-3,.grid-2,.adv-grid,.steps,.kpis .wrap{grid-template-columns:1fr 1fr}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .kpi .n{font-size:clamp(22px,6vw,30px)}
  .hero h1{font-size:40px}

  /* Mobile header: brand left, Contact + menu button right, links in a
     full-width dropdown under the bar. The header is the positioning
     context, so the panel hugs the bar's bottom edge even when condensed. */
  .nav{gap:12px;height:62px}
  .brand{width:auto;flex:none}
  .brand-mark{width:132px;height:23px}
  .nav-actions{margin-left:auto;gap:8px}
  .nav-actions .btn{font-size:13.5px;padding:8px 15px}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin-right:-8px;
    border:0;border-radius:10px;background:transparent;color:var(--navy);cursor:pointer}
  .menu-btn:hover{background:rgba(34,63,87,.06)}
  .menu-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
  .menu-btn .bars{display:block;width:22px;height:16px;position:relative}
  .menu-btn .bars span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .22s ease,opacity .18s ease,top .22s ease}
  .menu-btn .bars span:nth-child(1){top:0}
  .menu-btn .bars span:nth-child(2){top:7px}
  .menu-btn .bars span:nth-child(3){top:14px}
  .nav-open .menu-btn .bars span:nth-child(1){top:7px;transform:rotate(45deg)}
  .nav-open .menu-btn .bars span:nth-child(2){opacity:0}
  .nav-open .menu-btn .bars span:nth-child(3){top:7px;transform:rotate(-45deg)}
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:0;
    padding:6px 0 10px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(34,63,87,.14)}
  .nav-open .navlinks{display:flex}
  .navlinks a{padding:13px 28px;font-size:16px}
  .navlinks a:not(.btn)::after{display:none}
  .navlinks a:hover,.navlinks a.active{background:var(--bg-soft)}
  .navlinks a:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
}
@media(max-width:400px){
  .brand-mark{width:118px;height:21px}
  .nav-actions .btn{padding:8px 13px}
}
@media(max-width:560px){
  .grid-3,.grid-2,.adv-grid,.team-grid,.steps,.kpis .wrap{grid-template-columns:1fr}
  .team-grid .person .role,.adv-grid .person .role{min-height:0}
  .hero h1{font-size:34px}.section-head h1,.section-head h2{font-size:28px}
  .page-hero h1{font-size:32px}
}

/* =========================================================================
   MODERN PASS — motion, depth and transitions (progressive enhancement)
   Applies only when JS is active (html.js) so no-JS renders everything.
   All within brand: navy + orange only. Honors prefers-reduced-motion.
   ========================================================================= */

/* ---- Fluid display type ------------------------------------------------- */
.hero h1{font-size:clamp(34px,4.6vw,56px)}
.page-hero h1{font-size:clamp(30px,3.8vw,46px)}
.section-head h2{font-size:clamp(27px,3.2vw,38px)}
.cta-band h2{font-size:clamp(28px,3.4vw,40px)}

/* ---- Cross-page view transitions ---------------------------------------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .26s ease both}
::view-transition-new(root){animation:vtIn .34s ease both}
@keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}

/* ---- Depth: gradient fields and soft glow ------------------------------- */
.hero{background:linear-gradient(158deg,#1a3244 0%,#223F57 62%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 78% at 80% 26%,rgba(231,116,44,.30),transparent 60%),
    radial-gradient(48% 60% at 8% 92%,rgba(112,128,144,.20),transparent 62%)}
.hero .wrap{position:relative;z-index:1}

.page-hero{position:relative;overflow:hidden;background:linear-gradient(158deg,#1a3244 0%,#223F57 72%)}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 72% at 86% 18%,rgba(231,116,44,.24),transparent 60%)}
.page-hero .wrap{position:relative;z-index:1}

.band{position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(42% 62% at 92% 0%,rgba(231,116,44,.16),transparent 60%)}
.band .wrap{position:relative;z-index:1}

.cta-band{position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(50% 80% at 50% 120%,rgba(231,116,44,.22),transparent 62%)}
.cta-band .wrap{position:relative;z-index:1}

/* ---- Condensing sticky nav ---------------------------------------------- */
header{transition:background .25s ease,box-shadow .25s ease,border-color .25s ease}
.nav{transition:height .25s ease}
.brand-mark{transition:height .25s ease}
.scrolled header{background:rgba(255,255,255,.96);box-shadow:0 6px 26px rgba(34,63,87,.09);border-bottom-color:transparent}
.scrolled .nav{height:58px}
.scrolled .brand-mark{height:22px}
@media(max-width:900px){.scrolled .nav{height:56px}.scrolled .brand-mark{height:21px}}
.navlinks a{position:relative}
.navlinks a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--orange);transition:right .22s ease}
.navlinks a:not(.btn):hover::after,.navlinks a.active::after{right:0}

/* ---- Micro-interactions ------------------------------------------------- */
.card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(231,116,44,.45);box-shadow:0 14px 44px rgba(34,63,87,.13)}
.mkt{transition:transform .2s ease,box-shadow .2s ease}
.mkt:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(34,63,87,.18)}
.person .ph{transition:filter .25s ease,transform .25s ease}
.person:hover .ph{filter:none;transform:translateY(-3px)}
.btn{transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease}
.btn-primary:hover{box-shadow:0 8px 24px rgba(231,116,44,.32);transform:translateY(-1px)}

/* ---- Hero entrance (above the fold, on load) ---------------------------- */
@keyframes riseIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.js .hero-copy{animation:riseIn .7s cubic-bezier(.2,.6,.2,1) both}
.js .hero-art{animation:riseIn .7s cubic-bezier(.2,.6,.2,1) .12s both}
.js .page-hero .wrap>*{animation:riseIn .6s cubic-bezier(.2,.6,.2,1) both}
.js .page-hero .wrap>*:nth-child(2){animation-delay:.06s}
.js .page-hero .wrap>*:nth-child(3){animation-delay:.12s}
.js .page-hero .wrap>*:nth-child(4){animation-delay:.18s}

/* ---- Scroll reveal (below the fold) ------------------------------------- */
.js .section-head,.js .card,.js .claim,.js .step,.js .person,.js .mkt,.js .callout,.js .kpi,.js .logobar,.js .platform-art{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.6,.2,1) var(--rd,0ms),transform .6s cubic-bezier(.2,.6,.2,1) var(--rd,0ms)}
.js .section-head.in,.js .card.in,.js .claim.in,.js .step.in,.js .person.in,.js .mkt.in,.js .callout.in,.js .kpi.in,.js .logobar.in,.js .platform-art.in{opacity:1;transform:none}

/* Stat figures pop in (scale+fade) once their card reveals. The number text
   is never rewritten, so the exact approved figures always display. */
.js .mkt .size,.js .kpi .n{opacity:0;transform:scale(.72);transform-origin:left center;transition:opacity .5s ease .12s,transform .55s cubic-bezier(.2,.85,.25,1) .12s}
.js .mkt.in .size,.js .kpi.in .n{opacity:1;transform:none}

/* ---- Respect reduced motion: show everything, animate nothing ----------- */
@media (prefers-reduced-motion:reduce){
  .js .hero-copy,.js .hero-art,.js .page-hero .wrap>*{animation:none}
  .js .section-head,.js .card,.js .claim,.js .step,.js .person,.js .mkt,.js .callout,.js .kpi,.js .logobar,.js .platform-art,
  .js .mkt .size,.js .kpi .n{opacity:1;transform:none}
  .card:hover,.mkt:hover,.person:hover .ph,.btn-primary:hover{transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---- Nexus mechanism figure (animated SVG) ------------------------------ */
.nexus-figure{border-radius:var(--radius);background:var(--bg-soft);border:1px solid var(--line);padding:14px;box-shadow:var(--shadow);line-height:0}
.nexus-figure img,.nexus-figure object{width:100%;display:block}
.nexus-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px;margin-top:26px}
@media(max-width:1000px){.nexus-steps{grid-template-columns:repeat(2,1fr)}}
.nexus-step .k{font-family:Montserrat;font-weight:800;color:var(--orange);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.nexus-step h4{font-size:16px;margin:7px 0 5px}
.nexus-step p{color:var(--slate);font-size:14px}
@media(max-width:640px){.nexus-steps{grid-template-columns:1fr;gap:14px}}

/* =========================================================================
   Nexus mechanism comparison + partnership trees                (2026-09-22)
   ========================================================================= */

/* ---- Nexus mechanism: two-panel comparison ------------------------------ */
/* The figures are .svg files embedded with <object>, not <img>, so each one
   gets its own viewport and the breakpoints inside it fire on the figure's
   width rather than the page's. That keeps the diagram labels legible when
   the panel is narrow. All prose lives here in HTML so it wraps. */
.mech{display:grid;grid-template-columns:1fr;gap:18px;min-width:0}
@media(min-width:900px){.mech{grid-template-columns:1fr 1fr}}
.mech-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 14px 12px;min-width:0}
.mech-panel img,.mech-panel object{width:100%;height:auto;display:block}
.mech-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.mech-dot{width:9px;height:9px;border-radius:50%;flex:none}
.mech-dot.is-conv{background:var(--slate)}
.mech-dot.is-nexus{background:var(--orange)}
.mech-sub{font-size:12.5px;color:var(--slate);margin-bottom:8px}
.mech-vial{font-size:12.5px;line-height:1.45;color:var(--slate);background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:10px}
.mech-cap{color:var(--slate);font-size:13px;line-height:1.5;margin-top:10px}

/* ---- Partnership tree (single-audience partner pages only) --------------
   These two pages are the audience split CLAUDE.md allows, so --accent is
   set per page: orange for skincare, pharma green for pharma. Nowhere else. */
/* The interior hero is dark, so .note needs light ink there. */
.page-hero .note{color:#a9bccb}
.page-hero .note a{color:#fff;text-decoration:underline}

/* Audience accent, set per page. The mixed pages stay navy + orange. */
.page-skincare{--accent:var(--orange)}
.page-pharma{--accent:#1B9E6E}
.tree-card{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:20px 16px 18px;box-shadow:var(--shadow)}
.tree-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tree-scroll svg{display:block;width:100%;height:auto}
@media(max-width:1180px){.tree-scroll svg{min-width:1100px}}
.tree-hint{display:none;font-size:12px;color:var(--slate);margin-top:8px}
@media(max-width:1180px){.tree-hint{display:block}}
.tree-note{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--slate)}
.tree-card .rl{font:600 15px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;fill:#7d8e9c}
.tree-card .rn{font:700 15.5px Montserrat,sans-serif;letter-spacing:.04em;fill:var(--accent)}
.tree-card .lab{font:600 15px Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.tree-card .hd{font:700 17px Montserrat,sans-serif;fill:#223F57}
.tree-card .bd{font:400 15px Inter,sans-serif;fill:#5b6b7a}
.tree-card .mt{font:700 15.5px Montserrat,sans-serif;fill:#fff}
.tree-card .ms{font:400 15px Inter,sans-serif;fill:#b9c6d2}
.tree-card .ph{font:700 16px Montserrat,sans-serif;fill:#fff}
.tree-card .pb{font:400 15px Inter,sans-serif;fill:#dfe6ec}
/* Resting state is fully visible. The intro plays once, when the figure
   scrolls into view, then holds. No element can end up hidden. */
.tree-card .ln{stroke-dasharray:var(--len);stroke-dashoffset:0}
.tree-card.play .box,.tree-card.play .mid,.tree-card.play .pth,.tree-card.play .rail{animation:treeFade .55s ease-out backwards}
.tree-card.play .ln{animation:treeDraw .8s ease-in-out backwards}
@keyframes treeFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes treeDraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .tree-card.play .box,.tree-card.play .mid,.tree-card.play .pth,.tree-card.play .rail,.tree-card.play .ln{animation:none}
}

/* =========================================================================
   INSIGHTS: publications, talks and events; TEAM: earlier talks;
   PARTNERS: confidential partner tiles.
   ========================================================================= */

/* ---- Publications ------------------------------------------------------- */
.pub-tier:first-of-type{margin-top:0}
.pub-list{list-style:none;margin:0}
.pub{border-top:1px solid var(--line);padding:22px 0}
.pub:first-child{border-top:0;padding-top:0}
.pub-title{font-size:18px;line-height:1.4;font-weight:700;margin-bottom:10px;max-width:46em}
.pub-meta{font-size:14.5px;line-height:1.6;color:var(--slate);margin-bottom:10px;max-width:52em}
.pub-meta strong{color:var(--navy);font-weight:600}
.pub-meta a{color:var(--orange);font-weight:600;overflow-wrap:anywhere}
.pub-meta a:hover{text-decoration:underline}
.pub-note{font-size:15px;line-height:1.65;color:var(--slate);max-width:52em}

/* ---- Talks and events --------------------------------------------------- */
.event-list{list-style:none;margin:0}
.event{display:grid;grid-template-columns:190px 1fr;gap:28px;padding:22px 0;border-top:1px solid var(--line)}
.event:first-child{border-top:0;padding-top:0}
.event-when{font-family:Montserrat,system-ui,sans-serif;font-weight:700;font-size:14px;line-height:1.5;color:var(--slate)}
.event-tag{display:block;width:fit-content;margin-top:8px;padding:3px 10px;border-radius:999px;
  background:rgba(231,116,44,.12);color:var(--orange);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.event-body h3{font-size:18px;line-height:1.35;margin-bottom:6px;max-width:34em}
.event-body h3 a{color:var(--navy)}
.event-body h3 a:hover{color:var(--orange)}
.event-body p{font-size:15px;line-height:1.65;color:var(--slate);max-width:52em}

/* ---- Team: earlier talks ------------------------------------------------ */
.earlier-note{font-size:14px;color:var(--slate);margin:-14px 0 18px}
.earlier-list{list-style:none;margin:0;max-width:64em}
.earlier-list li{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:14px 0;border-top:1px solid var(--line)}
.earlier-list li:first-child{border-top:0;padding-top:0}
.earlier-list .when{font-family:Montserrat,system-ui,sans-serif;font-weight:700;font-size:13.5px;color:var(--slate)}
.earlier-list .what{font-size:14.5px;line-height:1.6;color:var(--slate)}
.earlier-list .what strong{color:var(--navy);font-weight:600}
.earlier-list .what a:hover{color:var(--orange)}

/* ---- Partners: confidential tiles --------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.tile{display:flex;flex-direction:column;min-width:0}
.tile-art{display:block;width:100%;height:auto}
.tile .stage{font-family:Montserrat,system-ui,sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange);margin-top:10px}
.tile .stage:empty{display:none}

@media(max-width:1000px){
  /* two across, then three, so five tiles never leave a lone orphan */
  .tiles{grid-template-columns:repeat(6,1fr)}
  .tile:nth-child(-n+2){grid-column:span 3}
  .tile:nth-child(n+3){grid-column:span 2}
}
@media(max-width:700px){
  .event{grid-template-columns:1fr;gap:8px}
  .event-tag{display:inline-block;margin:0 0 0 10px;vertical-align:1px}
  .earlier-list li{grid-template-columns:1fr;gap:4px}
}
@media(max-width:560px){
  .tiles{grid-template-columns:1fr;gap:16px}
  .tile:nth-child(-n+2),.tile:nth-child(n+3){grid-column:auto}
}


/* ---- 2026-09-29: clickable cards, Nexus-first mechanism ---------------- */
a.card,a.mkt,a.step,a.nexus-figure{display:block;text-decoration:none;color:inherit;cursor:pointer}
a.card:focus-visible,a.mkt:focus-visible,a.step:focus-visible,a.nexus-figure:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.card .more{display:inline-block;margin-top:14px;font-family:Montserrat;font-weight:700;font-size:13px;color:var(--orange)}
.card .more::after{content:"\2192";margin-left:6px;transition:margin-left .18s ease}
.card:hover .more::after{margin-left:10px}
a.step{border-radius:10px;transition:background .18s ease}
a.step:hover{background:var(--bg-soft)}
.band a.step:hover{background:rgba(255,255,255,.06)}
a.step:first-child{padding-left:22px}
.steps a.step:first-child{border-left:0}
a.nexus-figure{transition:transform .18s ease,box-shadow .18s ease}
a.nexus-figure:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(34,63,87,.13)}
.mech-panel-nexus{border-color:rgba(231,116,44,.45);box-shadow:var(--shadow)}
.mech-panel-conv{background:var(--bg-soft)}
.mech-panel-conv img{opacity:.85}
/* link-cards: keep the panel's own text color */
a.mkt{color:#fff}
a.mkt:nth-child(1){color:var(--navy)}
/* ghost button on light backgrounds */
.soft .btn-ghost,.markets .btn-ghost,section:not(.hero):not(.band):not(.cta-band):not(.page-hero) .btn-ghost{border-color:var(--navy);color:var(--navy)}
.soft .btn-ghost:hover,section:not(.hero):not(.band):not(.cta-band):not(.page-hero) .btn-ghost:hover{background:rgba(34,63,87,.06);border-color:var(--navy)}
/* Partners dropdown in the nav */
.navlinks .has-menu{position:relative}
.navlinks .menu{display:none;position:absolute;top:100%;left:-14px;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 44px rgba(34,63,87,.14);padding:8px;margin-top:12px;z-index:30}
.navlinks .menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.navlinks .has-menu:hover .menu,.navlinks .has-menu:focus-within .menu{display:block}
.navlinks .menu a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600}
.navlinks .menu a small{display:block;font:400 12.5px Inter,sans-serif;color:var(--slate);margin-top:2px}
.navlinks .menu a:hover{background:var(--bg-soft);color:var(--navy)}
.navlinks .menu a::after{display:none}
@media(max-width:900px){
  .navlinks .menu{display:block;position:static;box-shadow:none;border:0;padding:0 0 6px;margin:0;min-width:0;background:transparent}
  .navlinks .menu a{padding:10px 28px 10px 44px;font-size:15px}
}
.claim .ck.big{width:auto;min-width:64px;height:auto;padding:6px 10px;font-size:26px;line-height:1;flex-direction:column;background:transparent;color:var(--orange);align-items:flex-start;text-align:left}
.claim .ck.big span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);margin-top:3px}
.chooser .card h3{font-size:24px}
a.post-card,.post-card{display:flex;flex-direction:column}
.post-card .more{margin-top:auto;padding-top:16px}
.post-card .more::after{content:none}