/* HOCL.com v2: inner pages. Loaded after hocl-v2.css. Restyles the legacy page markup
   (container/row/grid_N, wrapper_N, a3/a4, btn-default, research cards) into the homepage design system. */
.inner main{display:block}
/* nav dropdowns */
.menu .has-sub{position:relative;display:flex;align-items:center}
.menu a[aria-current=page]{color:var(--blue)}
.sub-t{background:none;border:0;padding:6px 4px;margin-inline-start:2px;cursor:pointer;color:var(--muted)}
.sub-t::before{content:"";display:block;width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg)}
.sub{display:none;position:absolute;top:100%;inset-inline-start:-16px;min-width:240px;list-style:none;margin:0;padding:8px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 30px rgba(15,30,43,.1)}
.sub a{display:block;padding:9px 12px;border-radius:8px;font-weight:500}.sub a:hover{background:var(--blue-l)}
@media(min-width:821px){.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.sub-open .sub{display:block}.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}}
/* page title band */
.page-hero{padding:36px 0 30px;background:linear-gradient(180deg,#fff,var(--bg));border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(1.6rem,3.6vw,2.5rem);font-weight:800;margin:0;max-width:900px}
.page-hero h1:empty{display:none}
/* legacy layout -> responsive grid */
#content{padding:0}
#content .container{max-width:1160px;margin:0 auto;padding:0 24px}
#content .container .container{max-width:none;padding:0}
#content [class^=wrapper_]{padding:44px 0}
#content [class^=wrapper_] [class^=wrapper_]{padding:0}
#content>[class^=wrapper_]:nth-child(even){background:var(--bg)}
#content .row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 40px;align-items:start}
#content .row+.row{margin-top:24px}
.grid_12{grid-column:span 12}.grid_9{grid-column:span 9}.grid_8{grid-column:span 8}.grid_7{grid-column:span 7}.grid_6{grid-column:span 6}.grid_5{grid-column:span 5}.grid_4{grid-column:span 4}.grid_3{grid-column:span 3}
#content .row>:not([class*=grid_]){grid-column:1/-1}
#content img{max-width:100%;height:auto;border-radius:12px}
#content .clearfix{display:none}
/* typography */
#content h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:.2em 0 .6em}
#content h3{font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:750;margin:0 0 .6em}
#content h4{font-size:1.08rem;margin:1.2em 0 .4em}
#content h5{font-size:1rem;margin:0 0 .5em}
#content p{margin:0 0 1em;color:var(--muted)}
#content p,#content li{max-width:78ch}
#content .grid_12 p{max-width:85ch}
#content ul{padding-inline-start:1.2rem}#content li{margin:.35rem 0;color:var(--muted)}
#content em{font-style:normal}
#content .italic{font-style:italic}
#content .a3{display:block;font-size:1.15rem;font-weight:700;color:var(--ink);text-decoration:none;margin:1.4em 0 .4em}
#content a.a3[href]:not([href="#"]){color:var(--blue)}#content a.a3[href]:not([href="#"]):hover{text-decoration:underline}
#content a[href="#"]{pointer-events:none}
#content .a4{display:block;font-weight:700;color:var(--ink);text-decoration:none;margin:.9em 0 .3em}
#content .p3{color:var(--ink);font-weight:600;margin:.8em 0 .3em}
#content .p3 span em{display:inline-block;background:var(--blue-l);color:var(--blue);border-radius:999px;padding:0 .6em;margin-inline-end:.5em;font-size:.85rem;font-weight:800;vertical-align:middle}
#content .p3>em{font-size:1.2rem}
#content .block_1{background:var(--blue-l);border-inline-start:4px solid var(--blue);border-radius:10px;padding:16px 20px;color:var(--ink);margin-top:1.5em}
#content .left_b{display:none}
#content .btn-default{display:inline-flex;align-items:center;font-weight:650;text-decoration:none;border-radius:999px;padding:.75rem 1.3rem;background:var(--blue);color:#fff;margin-top:1rem}
#content a.btn-default:hover{background:var(--blue-d)}
#content .list_1{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
#content .list_1 li{margin:0;border-bottom:1px solid var(--line)}
#content .list_1 a{display:block;padding:11px 0;text-decoration:none;color:var(--ink);font-weight:550}#content .list_1 a:hover{color:var(--blue)}
#content .wrapper_11{position:relative;background:var(--ink);color:#fff;border-radius:20px;overflow:hidden}
#content .wrapper_11 .row{display:block}#content .wrapper_11 .grid_6{max-width:640px;padding:40px}
#content .wrapper_11 h3{color:#fff}#content .wrapper_11 p{color:#C9D3DC}
#content .pic-bg{display:none}
/* research: breadcrumb, search, sanitizer names */
#content h3.text-bold{font-size:.95rem;font-weight:600;color:var(--muted);letter-spacing:0;line-height:1.6;margin:0 0 1rem}
#content h3.text-bold a{color:var(--blue);text-decoration:none}#content h3.text-bold a:hover{text-decoration:underline}
#content h3.text-bold~h4,#content .grid_12>h4,#content .grid_7>h4{font-size:.95rem;margin:.4rem 0}
#content h4 span[style]{color:var(--muted)!important;font-size:inherit!important}
#content ul[style*="list-style"]{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:.4rem 0 1rem}
#content ul[style*="list-style"] li{margin:0;font-size:.85rem;border:1px solid var(--line);background:#fff;border-radius:999px;padding:.3rem .8rem;color:var(--muted)}
#content fieldset{border:0;padding:0;margin:0}
#content form{margin:0}
.contact-form-buttons{display:flex;gap:10px;margin:.6rem 0 1rem;max-width:720px}
#content .contact-form-buttons input[type=text]{flex:1;min-width:0;font:inherit;padding:.8rem 1.1rem;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink)}
#content .contact-form-buttons input[type=text]:focus{border-color:var(--blue);outline:0;box-shadow:0 0 0 3px rgba(0,119,182,.18)}
#content .contact-form-buttons input[type=submit]{font:inherit;font-weight:650;padding:.8rem 1.5rem;border:0;border-radius:999px;background:var(--blue);color:#fff;cursor:pointer}
#content .contact-form-buttons input[type=submit]:hover{background:var(--blue-d)}
#content hr.divider{border:0;border-top:1px solid var(--line);margin:1.5rem 0}
/* hub cards (industries / microorganisms) */
#content .reveal-block{display:block;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.2s}
#content .reveal-block:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,30,43,.08)}
#content .reveal-block h3{padding:18px 20px 0;margin:0 0 4px}
#content .reveal-block p{padding:0 20px;margin:.3rem 0 0}
#content .reveal-block img{border-radius:0;width:100%;aspect-ratio:16/9;object-fit:cover;margin-top:14px}
#content .wrapper_13 .pad_t_4{padding:0}
#content .grid_12 .wrapper_13{margin-top:24px}
/* microbe tiles */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:8px}
.tile{display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:120px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);transition:.2s}
.tile:hover{border-color:var(--blue);box-shadow:0 10px 24px rgba(15,30,43,.07)}
.tile h4{margin:0!important;font-size:1.05rem!important;font-style:italic}
.tile span{color:var(--blue);font-weight:600;font-size:.9rem}.tile span::after{content:" \2192"}[dir=rtl] .tile span::after{content:" \2190"}
/* publication results */
#content .range>.row{gap:24px}
#content .range>.row>.grid_4{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0}
#content .range img{width:100%;aspect-ratio:37/25;object-fit:cover;border-radius:10px}
#content .range .divsource br{display:none}
#content .range .divsource .p3{font-size:.85rem;margin:12px 0 6px;color:var(--muted)}
#content .range .divsource a{color:var(--blue);text-decoration:none}
#content .range .divtitle a{text-decoration:none}
#content .range .divtitle span{color:var(--ink)!important;font-size:1.02rem;line-height:1.35}
#content .range .divmicrobes p{font-size:.88rem;margin:.6rem 0 0}
#content .range ul{list-style:none;padding:0;margin:.4rem 0}
#content .range li{margin:0}
#content .range li a span{color:var(--blue)!important;font-size:.88rem}
#content .range li span[style*="#fff"]{display:none}
#content .range>.row>.grid_4>br{display:none}
#content .comment{font-size:.9rem;color:var(--muted);line-height:1.55}
#content .range .bottom{display:none}
.morecontent>span{display:none}.morecontent.show>span{display:inline}
a.morelink{color:var(--blue);font-weight:650;text-decoration:none}
#content .range>.row>[class*=cell-]{grid-column:span 4}
#content .range img[src*=blanknoresults]{display:none}
#content .range>.row~h2,#content h2{color:var(--ink)}
/* products block */
.gens{padding:64px 0}
/* misc */
#content .grid_3 h3{font-size:1.3rem}
@media(max-width:960px){
 .grid_3{grid-column:span 6}.grid_4{grid-column:span 6}
 #content .range>.row>[class*=cell-]{grid-column:span 6}
 .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
 #content .grid_9,#content .grid_8,#content .grid_7,#content .grid_5{grid-column:span 12}
}
@media(max-width:820px){
 .menu .has-sub{flex-wrap:wrap}.menu .has-sub>a{flex:1}
 .sub-t{padding:12px}
 .sub{position:static;box-shadow:none;border:0;border-inline-start:2px solid var(--line);border-radius:0;padding:0 0 8px 12px;margin:0;width:100%;min-width:0}
 .has-sub.sub-open .sub{display:block}
 .sub-t[aria-expanded=true]::before{transform:translateY(2px) rotate(225deg)}
 .sub a{padding:9px 0}
 #content .grid_6{grid-column:span 12}
 #content [class^=wrapper_]{padding:32px 0}
 .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .page-hero{padding:26px 0 22px}
 .gens{padding:48px 0}
}
@media(max-width:560px){
 #content .container{padding:0 18px}
 .grid_3,.grid_4,#content .range>.row>[class*=cell-]{grid-column:span 12}
 .contact-form-buttons{flex-direction:column}
 .tiles{grid-template-columns:1fr 1fr;gap:10px}.tile{min-height:96px;padding:14px}
 #content .row{gap:18px}
}
[dir=rtl] #content .p3 span em{margin-inline-end:.5em}
#content .contact-form-buttons input[type=text]{margin:0;box-shadow:none}
#content .contact-form-buttons input[type=submit]{margin:0;text-transform:none}
/* .more is also the homepage's "more" link class: undo that styling for research abstracts */
#content .comment.more{color:var(--muted);font-weight:400}#content .comment.more::after{content:none}
#content .comment p:empty{display:none}
#content h3.text-bold~br,#content h3.text-bold~p:empty,#content .grid_7>br,#content .grid_7>p:empty{display:none}
#content h3.text-bold+h4,#content h3.text-bold~h4{margin-top:0}
#content .range>.row>.grid_4 .divtitle{margin-top:2px}
#content .grid_12>img{max-width:min(100%,820px)}
#content .container .gens{border-radius:20px;margin:40px 0 0;padding:44px 28px}
#content .container .gens .wrap{padding:0}
@media(max-width:560px){#content .container .gens{padding:32px 16px;margin-inline:-6px}}
/* research data (titles, abstracts, microbe and solution names) is English-only: keep it LTR on RTL pages */
[dir=rtl] #content .range>.row>.grid_4,[dir=rtl] #content ul[style*="list-style"] li,[dir=rtl] .tile h4{direction:ltr;unicode-bidi:isolate}
[dir=rtl] #content .range>.row>.grid_4{text-align:left}
[dir=rtl] .tile h4{text-align:right}
/* old orange (#FF8400) fails contrast on white: darker amber, same hue family */
#content span[style*="FF8400"]{color:#B45309!important}