/* Content-driven breakpoints, safe gutters, and bounded large-screen layouts. */
:root{--page-gutter:max(clamp(20px,4.4vw,80px),calc((100vw - 1600px)/2))}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable}
body{min-width:0}
.header,.hero,.section,.purpose,.footer,.direction-main{padding-inline:var(--page-gutter)}
.header{padding-left:max(var(--page-gutter),env(safe-area-inset-left));padding-right:max(var(--page-gutter),env(safe-area-inset-right))}
main,section,article,.hero-copy,.intro-grid>*,.card-body,.section-heading>*,.contact>div,.footer-top>*,.footer-bottom>*{min-width:0}
img,svg,canvas{max-width:100%}
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.intro-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.company-card{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.card-description,.intro-text p,.principle-content p,.footer-bottom,.dialog-tags,.inquiry{overflow-wrap:anywhere}
.section-heading>p{flex-shrink:0;max-width:38%}
.contact>div:not(.contact-rings){flex:1}
.footer-bottom{flex-wrap:wrap}
.footer-bottom>div{flex-wrap:wrap}
button,a,input,textarea,select{touch-action:manipulation}
.footer-bottom a,.footer-bottom button,.back-top,.board-home,.board-buttons button,.inspection-actions>*{display:inline-flex;align-items:center;min-height:44px}
.dialog-close{min-width:44px;min-height:44px}
dialog{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
.inquiry select,.inquiry textarea{font-size:16px}
@media(min-width:1800px){
 .hero h1{font-size:clamp(53px,3vw,64px)}
 .hero-art{min-height:760px}
 .hero .hero-description{font-size:16px}
 .header nav{font-size:15px;gap:40px}
 .brand{font-size:26px}
 .card-description,.intro-text>p:nth-child(2),.section-heading>p{font-size:16px}
 .purpose{min-height:760px}
}
/* Switch navigation before its links can collide with the wordmark. */
@media(max-width:960px){
 html{scroll-padding-top:96px}
 .header{height:80px}
 .menu{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:10px}
 .menu span{display:block;width:24px;height:1px;background:var(--ink);transition:transform .3s}
 .menu[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
 .menu[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
 .header nav{display:none;position:absolute;top:79px;left:0;right:0;background:#fff;padding:16px var(--page-gutter) 24px;flex-direction:column;align-items:stretch;gap:4px;border-bottom:1px solid var(--line);box-shadow:0 18px 30px #081b3a08;max-height:calc(100dvh - 80px);overflow:auto}
 .header nav.open{display:flex}
 .header nav>a{font-size:16px;padding:14px 0;min-height:48px}
 .header .nav-contact{justify-content:space-between;font-size:15px;padding:15px 20px;margin-top:12px}
 .company-card{grid-template-columns:minmax(0,1fr)}
 .research .card-art,.research .card-body{grid-column:auto;grid-row:auto}
 .card-art{min-height:360px}
 .card-body{padding:38px}
 .card-description{max-width:600px;font-size:15px}
 .venture-tags li{font-size:11px}
 .purpose{padding-top:48px;min-height:0}
 .purpose-copy{flex:none;padding:0}
 .purpose-copy h2{font-size:clamp(30px,5.2vw,53px)}
 .purpose-copy>p:last-child{max-width:100%}
 .purpose-art{position:relative;inset:auto;order:1;height:clamp(300px,49vw,450px);margin:12px 0 24px;opacity:.95}
 .purpose-bottom{order:2;margin:0}
 .page-progress{display:none}
 .footer-top{flex-wrap:wrap;gap:24px}
 .footer-top .brand{margin-right:auto}
 .footer-bottom>span:last-child{display:block}
 .direction-grid{grid-template-columns:1fr 1fr}
 .direction-card:last-child{grid-column:1/-1;max-width:600px;width:100%;justify-self:center}
}
@media(max-width:760px){
 .hero{grid-template-columns:minmax(0,1fr)}
 .hero-copy{padding:48px 0 0}
 .hero h1{font-size:clamp(20px,6.8vw,46px);letter-spacing:-.035em;line-height:1.23}
 .hero h1 .title-line{white-space:normal}
 .hero-art{min-height:360px;height:clamp(320px,65vw,440px);margin-top:0}
 .hero-art .molecule-image{transform:scale(.78)!important}
 .hero .hero-description{font-size:14px;max-width:620px;text-wrap:pretty}
 .hero-foot{gap:18px;flex-wrap:wrap;line-height:1.7}
 .hero-foot a{white-space:normal}
 .intro-grid{grid-template-columns:minmax(0,1fr);gap:28px}
 .intro-text>p:nth-child(2){max-width:620px}
 .section-heading{display:block}
 .section-heading>p{max-width:100%;margin-top:20px}
 .fields{grid-template-columns:minmax(0,1fr)}
 .fields>a,.fields>a+a{border-left:0;padding:24px 0}
 .fields>a+a{border-top:1px solid var(--line)}
 .fields small{max-width:none}
 .contact{flex-wrap:wrap;align-items:flex-start;gap:32px}
 .contact>div:not(.contact-rings){flex-basis:100%}
 .contact h2{font-size:clamp(38px,10.5vw,68px)}
 .round-cta{width:128px;height:128px;margin:0}
 .contact-rings{right:-170px;top:65%}
 .principle-toggle{grid-template-columns:26px 32px minmax(0,1fr) 28px;gap:10px;padding-block:26px}
 .principle-toggle svg{width:27px;height:27px}
 .principle-title{font-size:clamp(17px,3.5vw,23px);letter-spacing:-.025em}
 .principle-content{padding:0 16px 26px 78px}
 .footer-top .brand{width:100%}
 .footer-bottom{align-items:flex-start;flex-direction:column;gap:12px}
 .direction-grid{grid-template-columns:1fr}
 .direction-card:last-child{grid-column:auto;max-width:none}
 .board-heading{display:block}
 .board-heading>p{margin-top:22px}
}
@media(max-width:400px){
 .brand{font-size:clamp(16px,5vw,20px);gap:7px;letter-spacing:-.7px}
 .brand img{width:34px;height:34px}
 h2{font-size:clamp(28px,9vw,36px)}
 .section{padding-block:64px}
 .portfolio{padding-top:12px}
 .card-art{min-height:290px}
 .card-body{padding:28px 22px}
 .card-body h3{font-size:42px}
 .card-body h3.research-title{font-size:36px}
 .card-body>p{font-size:21px}
 .card-description{font-size:14px}
 .button{gap:22px;max-width:100%}
 .principle-toggle{grid-template-columns:22px minmax(0,1fr) 28px;gap:10px}
 .principle-toggle svg{display:none}
 .principle-content{padding-left:32px}
 .purpose-copy h2{font-size:clamp(25px,8vw,32px);letter-spacing:-.035em}
 .purpose-bottom{font-size:7px;letter-spacing:.3px;gap:12px;flex-wrap:wrap}
 .hero-foot{font-size:7px;letter-spacing:.5px}
 .footer-top{gap:14px}
 .direction-main .board-heading h1{font-size:clamp(30px,10vw,40px);letter-spacing:-.04em}
 .directions-page .header{gap:12px;flex-wrap:wrap;height:auto;min-height:80px;padding-block:12px}
 .directions-page .board-home{font-size:11px}
 .board-buttons{gap:10px;flex-wrap:wrap}
 .inspection-actions{flex-wrap:wrap}
}
/* Short landscape screens and zoomed layouts keep navigation and dialogs reachable. */
@media(max-height:500px) and (max-width:960px){
 .header{height:64px}.header nav{top:63px;max-height:calc(100dvh - 64px)}
 html{scroll-padding-top:76px}
 .hero-copy{padding-top:32px}
}
@media(hover:none){.company-card:hover{box-shadow:none}.primary:hover{transform:none}}
@media(min-width:961px){
 .purpose-art{left:calc(var(--page-gutter) + (100% - 2 * var(--page-gutter)) * .55);right:var(--page-gutter)}
 .contact-rings{right:calc(var(--page-gutter) - 200px)}
}
@media(max-width:280px){
 .fields>a,.fields>a+a{font-size:19px;gap:12px}
 .fields>a>span{min-width:0;overflow-wrap:anywhere}
 .card-body{padding-inline:18px}
 .card-body h3{font-size:35px}
 .card-body h3.research-title{font-size:30px}
 .card-body>p{font-size:19px}
 .brand{font-size:15px}.brand img{width:29px;height:29px}
 .footer-top{flex-direction:column;align-items:flex-start}.back-top{margin-left:0}
}

/* Let the company description fill its column at every breakpoint. */
.intro-text>p:nth-child(2){width:100%;max-width:none;text-wrap:balance}

/* Scale the company statement to fill two desktop lines. */
@media(min-width:961px){.intro-text>p:first-child{font-size:clamp(20px,2.2vw,36px);width:100%;max-width:none;letter-spacing:-.035em}}

/* Anchor all concentric rings to the contact button itself. */
.contact>div.contact-orbit{position:relative;flex:0 0 auto;width:max-content;display:grid;place-items:center;z-index:1;margin-right:6%}
.contact-orbit .round-cta{position:relative;z-index:2;margin:0}
.contact-orbit .contact-rings{left:50%;top:50%;right:auto;transform:translate(-50%,-50%);pointer-events:none}
@media(max-width:760px){.contact>div.contact-orbit{margin-right:0}}

/* Present the two portfolio companies as equal companion cards. */
@media(min-width:961px){
 .company-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:stretch}
 .company-card{display:flex;flex-direction:column;min-width:0}
 .company-card .card-art{order:0;min-height:0;height:clamp(232px,20vw,320px);flex:none}
 .company-card .card-body{order:1;display:flex;flex-direction:column;flex:1;padding:36px clamp(26px,2.8vw,44px)}
 .company-card .card-body h3{font-size:clamp(40px,3.7vw,56px);margin-top:0}
 .company-card .card-body>p{font-size:clamp(21px,1.7vw,25px)}
 .company-card .card-description{max-width:none}
 .company-card .venture-tags{margin-bottom:24px}
 .company-card .card-body .text-link{margin-top:auto;padding-top:20px;width:100%}
 .company-card .research-sculpture{inset:12% 18%;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
 .company-card .research-sculpture img{min-width:0;min-height:0}
}

.company-card .card-description{margin-bottom:24px}

.company-card:focus-visible{outline:3px solid #0000ff;outline-offset:5px}
.company-card .text-link{display:flex;justify-content:space-between;align-items:center}
.company-card .card-description{text-wrap:balance}

/* Match MedOps to the glass-and-silver portfolio artwork. */
.medops-art .research-sculpture{inset:12% 18%;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr)}
.medops-art .research-sculpture img{min-width:0;min-height:0}
.medops:hover .research-sculpture img{transform:scale(1.035)}

/* Let the company introduction flow directly into the portfolio. */
.intro.section{padding-bottom:clamp(40px,5vw,64px)}
.portfolio.section{padding-top:16px}
.portfolio .section-heading{margin:0 0 28px}
.portfolio .section-heading h2{font-size:clamp(28px,2.6vw,40px);line-height:1.15;letter-spacing:-.035em}

/* Keep a clear gap between company names and their descriptions. */
.company-card .card-body h3 + .card-description{margin-top:24px}

/* Three visible principles in one simple desktop row. */
.principles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;gap:0;border-bottom:1px solid var(--line)}
.principles-grid .principle{min-width:0;padding:32px clamp(20px,2.5vw,40px);border-bottom:0;background:transparent}
.principles-grid .principle:first-child{padding-left:0}
.principles-grid .principle:last-child{padding-right:0}
.principles-grid .principle + .principle{border-left:1px solid var(--line)}
.principle-heading{display:grid;grid-template-columns:1fr auto;align-items:center;gap:24px 16px}
.principle-heading svg{width:34px;height:34px;stroke:var(--accent);stroke-width:1.2;fill:none}
.principles-grid .principle-title{grid-column:1/-1;font-size:clamp(22px,2vw,30px);font-weight:400;line-height:1.25;letter-spacing:-.035em;min-height:2.5em}
.principles-grid .principle-content{display:block;padding:20px 0 0;opacity:1}
.principles-grid .principle-content p{font-size:15px;line-height:1.8;max-width:none}
@media(max-width:760px){
 .principles-grid{grid-template-columns:1fr;margin-top:28px}
 .principles-grid .principle{padding:28px 0}
 .principles-grid .principle + .principle{border-left:0;border-top:1px solid var(--line)}
 .principles-grid .principle-title{font-size:24px;min-height:0}
 .principles-grid .principle-content{padding-top:16px}
}

/* Balance each principle description across complete lines. */
.principles-grid .principle-content p{text-wrap:balance}

.hero .button[href="#portfolio"]:hover>span{transform:translateY(3px)}

/* Keep the contact navigation link readable in every state. */
.header nav>a.nav-contact{color:#fff;padding:14px 21px}
.header nav>a.nav-contact::after{display:none}