/* ================================================================
   YENDOU NAVIGATION (shared: media/yendou-nav.css)
   A fixed Ink header, full-bleed Ink mega-menus that open directly
   beneath it, and a full-screen Ink navigation on small screens.
   Every navigation rule lives in this file; pages keep only the markup.
   Class prefix .yd-nav so nothing collides with page components.
   ================================================================ */
:root{
  --yd-nav-ink:#16171B;
  --yd-nav-paper:#F8F7F2;
  --yd-nav-paper-60:rgba(248,247,242,.60);
  --yd-nav-paper-12:rgba(248,247,242,.12);
  --yd-nav-ease:cubic-bezier(.22,1,.36,1);
  --yd-nav-h:64px;
  --yd-nav-gutter:32px}

/* the header is out of flow, so the page starts beneath it and in-page
   anchors land below it rather than under it */
html{scroll-padding-top:var(--yd-nav-h)}
body{padding-top:var(--yd-nav-h)}

.yd-nav{position:fixed;top:0;left:0;right:0;height:var(--yd-nav-h);background:var(--yd-nav-ink);color:var(--yd-nav-paper);z-index:1000;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}

/* page-level a{} and button{} rules must not leak into the header: a zero-weight reset
   that every specific rule below still beats */
:where(.yd-nav) a,:where(.yd-nav) button{background:transparent;box-shadow:none;text-decoration:none;padding:0;margin:0;font-weight:500;border:0;border-radius:0;color:inherit;letter-spacing:0;text-transform:none}

/* layer order inside the header: scrim (1) < panels (inside .yd-nav__inner, 3) */
.yd-nav__inner{position:relative;z-index:3;max-width:1440px;height:100%;margin:0 auto;padding:0 var(--yd-nav-gutter);display:flex;align-items:center}

/* logo */
.yd-nav__logo{display:inline-flex;align-items:center;flex:0 0 auto;height:44px;border-radius:4px;text-decoration:none}
.yd-nav__logo-img{display:block;height:20px;width:auto;max-width:none}

/* top-level items */
.yd-nav__links{display:flex;align-items:center;height:100%;margin:0 0 0 8px;padding:0;list-style:none}
.yd-nav__links>li{display:flex;align-items:center;height:100%}
.yd-nav__link,.yd-nav__trigger{display:inline-flex;align-items:center;height:36px;margin:0;padding:0 16px;border:0;border-radius:2px;background:none;font-family:inherit;font-size:13px;font-weight:500;line-height:1;letter-spacing:-.004em;color:var(--yd-nav-paper-60);text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .18s var(--yd-nav-ease)}
.yd-nav__link:hover,.yd-nav__trigger:hover,
.yd-nav__link[aria-current],.yd-nav__link.is-active,
.yd-nav__dropdown.is-open>.yd-nav__trigger,.yd-nav__dropdown.is-current>.yd-nav__trigger{color:var(--yd-nav-paper)}

/* right-hand actions */
.yd-nav__actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto;padding-left:16px}
.yd-nav__login,.yd-nav__cta{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 20px;border:0;font-family:inherit;font-size:14px;font-weight:500;line-height:1;letter-spacing:-.004em;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .18s var(--yd-nav-ease),color .18s var(--yd-nav-ease)}
.yd-nav__login{border-radius:2px;background:var(--yd-nav-paper-12);color:var(--yd-nav-paper)}
.yd-nav__login:hover{background:rgba(248,247,242,.20);color:var(--yd-nav-paper)}
.yd-nav__cta{padding:0 16px 0 18px;border:1px solid var(--yd-nav-paper);border-radius:2px;background:var(--yd-nav-paper);color:var(--yd-nav-ink)}
.yd-nav__cta:hover{border-color:var(--red,#FF3337);background:var(--red,#FF3337);color:var(--yd-nav-paper)}
.yd-nav__cta svg{width:12px;height:12px;flex:none}

/* dropdown panels: fixed directly beneath the header, edge to edge, no gap.
   Height animates through the grid-row trick so no measurement is needed. */
.yd-nav__panel{position:fixed;top:var(--yd-nav-h);left:0;right:0;display:grid;grid-template-rows:0fr;background:var(--yd-nav-ink);visibility:hidden;transition:grid-template-rows .2s var(--yd-nav-ease),visibility 0s linear .2s}
.yd-nav__panel.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .2s var(--yd-nav-ease),visibility 0s}
.yd-nav__panel-clip{min-height:0;overflow:hidden}
.yd-nav__panel-inner{max-width:1440px;margin:0 auto;padding:28px var(--yd-nav-gutter) 30px;display:flex;align-items:flex-start;gap:120px;opacity:0;transition:opacity .2s var(--yd-nav-ease)}
.yd-nav__panel.is-open .yd-nav__panel-inner{opacity:1}
.yd-nav__col{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.yd-nav__heading{display:block;margin:0 0 10px;font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500;line-height:20px;letter-spacing:0;text-transform:none;color:var(--yd-nav-paper-60)}
.yd-nav__item{display:block;padding:0;margin:0;font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500;line-height:28px;letter-spacing:0;text-transform:none;color:var(--yd-nav-paper);text-decoration:none;white-space:nowrap;transition:color .16s var(--yd-nav-ease)}
.yd-nav__item:hover{color:var(--yd-nav-paper-60)}

/* scrim: below the header, above the page, dims and softens what is behind */
.yd-nav__scrim{position:fixed;top:var(--yd-nav-h);left:0;right:0;bottom:0;z-index:1;background:rgba(22,23,27,.30);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s var(--yd-nav-ease)}
.yd-nav.has-open-panel .yd-nav__scrim{opacity:1;pointer-events:auto}

/* menu button (small screens only) */
.yd-nav__mobile-toggle{display:none;position:relative;width:40px;height:40px;margin:0 -8px 0 auto;padding:0;border:0;border-radius:2px;background:none;color:var(--yd-nav-paper);cursor:pointer;-webkit-tap-highlight-color:transparent}
.yd-nav__mobile-toggle::before{content:"";position:absolute;inset:-4px}
.yd-nav__toggle-icon{position:absolute;left:50%;top:50%;width:20px;height:16px;margin:-8px 0 0 -10px}
.yd-nav__toggle-icon i{position:absolute;left:0;width:20px;height:2px;border-radius:1px;background:currentColor;transition:transform .2s var(--yd-nav-ease),top .2s var(--yd-nav-ease)}
.yd-nav__toggle-icon i:nth-child(1){top:2px}
.yd-nav__toggle-icon i:nth-child(2){top:12px}
.yd-nav.is-menu-open .yd-nav__toggle-icon i:nth-child(1){top:7px;transform:rotate(45deg)}
.yd-nav.is-menu-open .yd-nav__toggle-icon i:nth-child(2){top:7px;transform:rotate(-45deg)}

/* mobile navigation is closed and out of the way on desktop */
.yd-nav__mobile-panel{display:none}

/* current page inside a dropdown: a small red mark in the margin, no width change */
.yd-nav__item[aria-current="page"]{position:relative}
.yd-nav__item[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--red,#FF3337)}

/* focus rings on Ink: the brand red, always visible, never removed */
.yd-nav :focus-visible{outline:2px solid var(--red,#FF3337);outline-offset:2px}

/* narrower desktop widths: the gutters tighten, header and panels together */
@media (max-width:1180px){
  :root{--yd-nav-gutter:24px}
}

/* ---------- small screens ---------- */
@media (max-width:1023.98px){
  :root{--yd-nav-h:54px;--yd-nav-gutter:24px}
  .yd-nav__logo-img{height:18px}
  .yd-nav__links,.yd-nav__actions{display:none}
  .yd-nav__mobile-toggle{display:block}
  .yd-nav__scrim{display:none}

  .yd-nav__mobile-panel{display:block;position:fixed;top:var(--yd-nav-h);left:0;right:0;bottom:0;z-index:2;background:var(--yd-nav-ink);color:var(--yd-nav-paper);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:8px var(--yd-nav-gutter) 40px;opacity:0;visibility:hidden;transition:opacity .2s var(--yd-nav-ease),visibility 0s linear .2s}
  .yd-nav__mobile-panel.is-open{opacity:1;visibility:visible;transition:opacity .2s var(--yd-nav-ease),visibility 0s}
  body.yd-nav-menu-open{overflow:hidden}

  .yd-nav__mobile-list{list-style:none;margin:0;padding:0}
  .yd-nav__mobile-link,.yd-nav__accordion{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:54px;margin:0;padding:0;border:0;background:none;font-family:inherit;font-size:31px;font-weight:500;line-height:1.15;letter-spacing:-.02em;color:var(--yd-nav-paper);text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .yd-nav__accordion svg{width:16px;height:16px;flex:none;margin-right:2px;color:var(--yd-nav-paper-60);transition:transform .2s var(--yd-nav-ease)}
  .yd-nav__accordion[aria-expanded="true"] svg{transform:rotate(180deg)}
  .yd-nav__sub{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .2s var(--yd-nav-ease),visibility 0s linear .2s}
  .yd-nav__sub.is-open{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .2s var(--yd-nav-ease),visibility 0s}
  .yd-nav__sub-clip{min-height:0;overflow:hidden}
  .yd-nav__sub-inner{padding:2px 0 14px}
  .yd-nav__mobile-heading{display:block;padding:12px 0 2px;font-size:13px;font-weight:500;line-height:1.4;color:var(--yd-nav-paper-60)}
  .yd-nav__sub a{display:flex;align-items:center;min-height:44px;font-size:17px;font-weight:500;line-height:1.3;color:var(--yd-nav-paper-60);text-decoration:none}
  .yd-nav__sub a:hover,.yd-nav__sub a[aria-current]{color:var(--yd-nav-paper)}
  .yd-nav__mobile-link[aria-current],.yd-nav__mobile-link.is-active{color:var(--yd-nav-paper)}
  .yd-nav__sub a[aria-current="page"]{position:relative;padding-left:12px}
  .yd-nav__sub a[aria-current="page"]::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--red,#FF3337)}
  .yd-nav__mobile-divider{height:1px;margin:14px 0 8px;border:0;background:var(--yd-nav-paper-12)}
  .yd-nav__mobile-cta{justify-content:flex-start;gap:12px}
  .yd-nav__mobile-cta svg{width:22px;height:22px;flex:none}
  .yd-nav__mobile-login{color:var(--yd-nav-paper-60)}
  .yd-nav__mobile-login:hover{color:var(--yd-nav-paper)}
}

@media (prefers-reduced-motion:reduce){
  .yd-nav__link,.yd-nav__trigger,.yd-nav__login,.yd-nav__cta,.yd-nav__item,.yd-nav__scrim,
  .yd-nav__panel,.yd-nav__panel.is-open,.yd-nav__panel-inner,
  .yd-nav__toggle-icon i,.yd-nav__accordion svg,
  .yd-nav__mobile-panel,.yd-nav__mobile-panel.is-open,.yd-nav__sub,.yd-nav__sub.is-open{transition-duration:.01ms;transition-delay:0s}
}

/* ---------- light header (every page except the biotech ones): #F5F3F2 bar, #646464 and Ink type,
   #DEDEDE Log in, Ink Try Yendou. The tokens invert; the rules above stay the same. ---------- */
.yd-nav--light{--yd-nav-ink:#F5F3F2;--yd-nav-paper:#16171B;--yd-nav-paper-60:#646464;--yd-nav-paper-12:rgba(22,23,27,.08);box-shadow:0 1px 0 rgba(22,23,27,.08)}
.yd-nav--light .yd-nav__panel{box-shadow:0 1px 0 rgba(22,23,27,.08)}
.yd-nav--light .yd-nav__login{background:#DEDEDE;color:#16171B}
.yd-nav--light .yd-nav__login:hover{background:#D2D2D2;color:#16171B}
.yd-nav--light .yd-nav__cta{border-color:#16171B;background:#16171B;color:#F8F7F2}
.yd-nav--light .yd-nav__cta:hover{border-color:var(--red,#FF3337);background:var(--red,#FF3337);color:#F8F7F2}
.yd-nav--light .yd-nav__scrim{background:rgba(22,23,27,.18)}
@media (max-width:1023.98px){
  .yd-nav--light .yd-nav__mobile-login{color:#646464}
  .yd-nav--light .yd-nav__mobile-login:hover{color:#16171B}
}

/* ---------- the CRO sub-bar: a second bar under the header, open on the CRO pages, toggled by "CROs" elsewhere ---------- */
.yd-nav{--yd-sub-h:44px}
.yd-subnav{position:absolute;top:100%;left:0;right:0;height:var(--yd-sub-h);background:var(--yd-nav-ink);z-index:2;display:none;box-shadow:0 1px 0 rgba(22,23,27,.08)}
.yd-subnav.is-open{display:block;transition:opacity .15s var(--yd-nav-ease)}
.yd-subnav.is-hidden{opacity:0;pointer-events:none}
.yd-subnav__inner{max-width:1440px;height:100%;margin:0 auto;padding:0 var(--yd-nav-gutter);display:flex;align-items:stretch;gap:36px;overflow-x:auto;scrollbar-width:none}
.yd-subnav__inner::-webkit-scrollbar{display:none}
.yd-subnav__link{display:inline-flex;align-items:center;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--yd-nav-paper-60);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:color .18s var(--yd-nav-ease)}
.yd-subnav__link:hover{color:var(--yd-nav-paper)}
.yd-subnav__link[aria-current="page"]{color:#FF3337;border-bottom-color:#FF3337}
.yd-subnav__link[aria-disabled="true"]{cursor:default;opacity:.55}
body:has(.yd-subnav.is-open){padding-top:calc(var(--yd-nav-h) + 44px)}
html:has(.yd-subnav.is-open){scroll-padding-top:calc(var(--yd-nav-h) + 44px)}
.yd-nav:has(.yd-subnav.is-open) .yd-nav__panel{top:calc(var(--yd-nav-h) + 44px)}
.yd-nav:has(.yd-subnav.is-open) .yd-nav__scrim{top:calc(var(--yd-nav-h) + 44px)}
@media (max-width:1023.98px){.yd-subnav__inner{gap:26px}.yd-nav:has(.yd-subnav.is-open) .yd-nav__mobile-panel{top:calc(var(--yd-nav-h) + 44px)}}

/* the CROs and Biotech triggers are links now */
a.yd-nav__trigger{text-decoration:none;display:inline-flex;align-items:center}

/* ---------- one-level nav with crumbs (7 Sep 2026): the sub-bars are gone ---------- */
.yd-nav__crumb-sep{display:inline-flex;align-items:center;height:36px;margin:0 0 0 -10px;font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500;line-height:1;color:#FF3337}
.yd-nav__crumb{display:inline-flex;align-items:center;height:36px;padding:0 16px 0 6px;font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:500;line-height:1;color:#FF3337;white-space:nowrap}
/* the whole crumb is red: CROs > section name */
.yd-nav__dropdown:has(.yd-nav__crumb)>.yd-nav__trigger,.yd-nav__dropdown:has(.yd-nav__crumb)>.yd-nav__trigger:hover{color:#FF3337}
/* the section panels are the full-width mega-menu again (her call, 7 Sep 2026); the current page is red */
.yd-nav__panel .yd-nav__item[aria-current="page"]{color:#FF3337}
.yd-nav__panel .yd-nav__item[aria-current="page"]::before{display:none}   /* the hanging dot broke the column edge (her call, 7 Sep 2026) */
.yd-nav__panel .yd-nav__item[aria-disabled="true"]{opacity:.5;cursor:default}

/* panel headings in the eyebrow register (her call, 7 Sep 2026): mono, uppercase, tracked */
.yd-nav__heading{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:20px;margin-bottom:12px}

/* ---------- the section panels as a spacious product surface (her brief, 7 Sep 2026, after Attio) ---------- */
.yd-nav__panel-inner{max-width:1440px;margin:0 auto;padding:56px 64px 64px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,.9fr);column-gap:96px;align-items:start}
.yd-nav__col{display:flex;flex-direction:column;align-items:stretch;min-width:0}
.yd-nav__col--rail{padding-left:56px;border-left:1px solid var(--yd-nav-paper-12,rgba(22,23,27,.08))}
.yd-nav__heading{margin:0 0 26px}
.yd-nav__panel .yd-nav__item{display:block;padding:0;margin:0 0 32px;line-height:1.3;white-space:normal;text-decoration:none}
.yd-nav__panel .yd-nav__item:last-child{margin-bottom:0}
.yd-nav__item-t{display:block;font-family:'Inter',system-ui,sans-serif;font-size:16px;font-weight:500;letter-spacing:-.005em;color:var(--yd-nav-paper);transition:color .16s var(--yd-nav-ease)}
.yd-nav__item-d{display:block;margin-top:5px;font-family:'Inter',system-ui,sans-serif;font-size:13.5px;font-weight:400;color:var(--yd-nav-paper-60)}
.yd-nav__panel .yd-nav__item:hover .yd-nav__item-t{color:#FF3337}
.yd-nav__panel .yd-nav__item[aria-current="page"] .yd-nav__item-t{color:#FF3337}
.yd-nav__panel .yd-nav__item[aria-disabled="true"]{opacity:.5;cursor:default}
.yd-nav__panel .yd-nav__item[aria-disabled="true"]:hover .yd-nav__item-t{color:var(--yd-nav-paper)}
@media (max-width:1279.98px){.yd-nav__panel-inner{padding:48px 40px 56px;column-gap:56px}.yd-nav__col--rail{padding-left:40px}}

/* ---------- glyphs beside each item: the board register in miniature (her brief, 7 Sep 2026, after Attio's icons) ---------- */
.yd-nav__panel .yd-nav__item{display:flex;align-items:flex-start;gap:18px}
.yd-nav__glyph{flex:none;position:relative;width:56px;height:56px;box-sizing:border-box;border:1px dashed var(--yd-nav-paper-12,rgba(22,23,27,.14));border-radius:2px;color:var(--yd-nav-paper);display:flex;align-items:center;justify-content:center;transition:border-color .16s var(--yd-nav-ease),color .16s var(--yd-nav-ease)}
.yd-nav__glyph::before,.yd-nav__glyph::after{content:"";position:absolute;background:var(--yd-nav-paper-12,rgba(22,23,27,.14))}
.yd-nav__glyph::before{left:50%;top:-5px;bottom:-5px;width:1px;opacity:.6}
.yd-nav__glyph::after{top:50%;left:-5px;right:-5px;height:1px;opacity:.6}
.yd-nav__glyph svg{position:relative;z-index:1;width:40px;height:40px;display:block;background:var(--yd-nav-ink)}
.yd-nav__item-body{display:block;min-width:0;padding-top:6px}
.yd-nav__panel .yd-nav__item:hover .yd-nav__glyph{border-color:var(--yd-nav-paper-60)}
.yd-nav__panel .yd-nav__item[aria-current="page"] .yd-nav__glyph{border-style:solid;border-color:#FF3337}
.yd-nav__panel .yd-nav__item[aria-disabled="true"] .yd-nav__glyph{color:var(--yd-nav-paper-60)}

/* links centred in the bar (her call, 8 Sep 2026) */
@media (min-width:1024px){.yd-nav__inner{position:relative}.yd-nav__links{position:absolute;left:0;right:0;top:0;margin:0;justify-content:center;pointer-events:none}.yd-nav__links>li{pointer-events:auto}}

/* a caret on the section triggers: there is more underneath (her call, 8 Sep 2026) */
.yd-nav__caret{display:inline-block;width:9px;height:9px;margin:0 0 0 6px;border:0;opacity:1;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 9 9%27%3E%3Cpath d=%27M1.5 3l3 3 3-3%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/9px 9px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 9 9%27%3E%3Cpath d=%27M1.5 3l3 3 3-3%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/9px 9px no-repeat;transform:none;transition:transform .18s var(--yd-nav-ease)} /* chevron drawn at the label's stem weight, in currentColor (8 Sep 2026) */
.yd-nav__dropdown.is-open>.yd-nav__trigger .yd-nav__caret{transform:rotate(180deg);margin-top:0}

/* crumb, calmer (8 Sep 2026): the trigger stays a normal item with its caret; a hairline divides it from the current page, which alone is red */
.yd-nav__dropdown:has(.yd-nav__crumb)>.yd-nav__trigger,.yd-nav__dropdown:has(.yd-nav__crumb)>.yd-nav__trigger:hover{color:var(--yd-nav-paper)}
.yd-nav__crumb-sep{width:1px;height:14px;margin:0 6px 0 2px;background:var(--yd-nav-paper-12,rgba(22,23,27,.18));font-size:0;color:transparent}
.yd-nav__crumb{padding:0 16px 0 6px;color:#FF3337}
